Why React?

Framework: 다른 사람이 만든 틀 안으로 내가 들어가서 작업하는 것
Library: 내 작업에 다른사람이 만들어 둔 코드를 가져와서 사용하는 것

1. Angular

• 2010년 Google에서 개발한 Framework
• TypeScript 기반으로 매우 안정적이고 탄탄한 Frontend App 개발이 가능하며 Framework 답게 다양한 기능이 내장되어 있다.
• 무겁고 배우기 어렵다는 단점이 있다.

2. Vue

• 2014년 Evan You라는 개인이 개발한 Framework
• 코드가 깔끔하고 배우기 쉽기 때문에 가장 나중에 생겼지만 성장 속도가 정말 빠르다.

3. React

• “지속적으로 데이터가 변화하는 대규모 애플리케이션을 구축하는 것” 을 목표로 2013년 Facebook 에서 개발한 Library
• Angular, Vue 등의 다른 Framework 와는 달리 React는 오로지 View 만 담당하는 Library이다. 또한 자기만의 문법을 가진 Angular, Vue 와 달리 자바스크립트 문법을 그대로 사용한다.
• 내장되어 있는 기능이 부족해 third-party 라이브러리(ex. react-router-dom, redux)를 함께 사용한다.
• 페이스북의 지속적인 관리가 이루어지고 있고 꾸준한 사용자 수 증가를 기반으로 생태계가 활성화 되어있다.
• 컴포넌트를 비교적 더 단순하고 간단하게 정의할 수 있고 웹이 아닌 플랫폼에서도 활용할 수 있는 기술로 확장 가능하다.

What is react?

사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리

리액트와 같은 프론트엔드 라이브러리 혹은 프레임워크를 사용하는 가장 큰 이유 중 하나는 UI 를 자동으로 업데이트 해 준다는 점이다.

리액트는 가상 돔(Virtual DOM) 을 통해 UI 를 빠르게 업데이트 한다. 가상 돔은 이전 UI 상태를 메모리에 유지해서 변경될 UI 의 최소 집합을 계산하는 기술이다. 이 기술 덕분에 불필요한 UI 업데이트는 줄고, 성능은 좋아진다.

선언적 VS 절차적

절차적 방식은 오류가 났을 때 하나하나 되짚어봐야 하지만 선언적 방식은 기대한 부분과 어떤 부분이 다른지만 확인해보면 되기 때문에 선언적 방식을 사용한다.

Virtual DOM

DOM 조작 -> Layout -> Paint

브라우저는 DOM 의 조작이 발생할 때마다 화면의 배치를 잡는 과정과 화면에 색을 칠하는 과정을 거치게 된다. 이 과정을 각각 Layout, Paint 라고 부른다.

리액트가 화면을 A 에서 B 로 바꾸기 위해서는 여러번의 DOM 조작이 필요할 수 있다. 이런 상황에서 매번 DOM 을 건드리게 된다면 조작이 발생할 때마다 다시 배치를 잡고 색을 칠하는 동작을 비효율적으로 반복하게 될 것이다.

리액트는 실제 DOM 이 아니라 가상의 DOM 을 만들어서 유지하고 있다. 화면을 바꿔야하는 상황이 오면 화면을 바꾸기 위해 필요한 DOM 의 조작을 virtual DOM 을 통해서 계산한다. 그리고 나서 실제 브라우저에 있는 DOM 에는 한 번의 변경만 발생시킨다. 따라서 요소들을 다시 배치하고 색을 칠하는 과정을 한 번만 수행하면 되므로 효율적이다.

Node

자바스크립트가 브라우저 밖(ex. 서버)에서도 동작하게 하는 환경, ‘자바스크립트의 탈웹을 이루어낸 도구’

우리가 작성하는 자바스크립트 코드는 텍스트의 나열이다. 이러한 텍스트들이 실제 의미를 가지려면 자바스크립트 코드를 읽어서 실행을 시킬 수 있는 도구들이 필요하다.

이렇게 자바스크립트를 읽어서 실행할 수 있는 도구를 자바스크립트 실행 환경이라고 부른다. 가장 유명한 자바스크립트 실행 환경은 브라우저(Browser)이다.

자바스크립트는 브라우저에서 간단한 스크립트 명령을 실행하기 위해서 탄생한 언어이기에 모든 브라우저는 자바스크립트를 읽고 해석할 수 있다.

웹 개발 시장이 점점 커지고 자바스크립트를 다룰줄 아는 개발자가 늘어나면서 브라우저가 아닌 다른 환경에서도 자바스크립트를 이용해 개발을 하고자 하는 니즈가 생겨났고 이런 니즈속에서 탄생한 것이 바로 Node 이다.

Node 를 사용하는 이유

우리는 리액트를 이용해서 프로젝트를 만드는데, 우리가 프로젝트를 진행할 때는 실제 웹 브라우저에서 작업하는 것이 아니라 컴퓨터 안에서 작업한다.

리액트로 프로젝트를 구성하기 위해서는 UI 를 구성하는 React 외에도 최신의 자바스크립트 문법을 모든 브라우저가 읽고 해석할 수 있는 과거의 문법으로 변환시켜주는 역할을 하는 Babel, 작성한 자바스크립트 파일을 분석해서 분할하고 합쳐주는 역할을 하는 Webpack 등의 여러 패키지들이 필요하다.

이것 외에도 프로젝트를 원활하게 진행하기 위해서는 수많은 패키지들이 요구된다. 이런 여러가지 패키지들을 컴퓨터에서 돌리기 위해 Node 를 설치해야 한다.

npm

노드로 실행할 수 있는 프로그램 하나하나를 패키지(Package) 라고 부른다. 리액트, 바벨, 웹팩 등이 모두 패키지라고 할 수 있다.

npm(Node Package Manager) 은 노드에서 실행할 수 있는 여러 패키지들을 다운로드 받고 업데이트 하고, 삭제할 수 있는 매니저 역할을 하는 도구이다. npm은 Node.js 를 설치하면 자동으로 설치된다.

CRA

Creat React App 의 약어로 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구(toolchain)이다.

• 리액트는 UI 기능만 제공하기 때문에 개발자가 직접 구축해야하는 것들이 많다.
• 처음 시작하는 단계에서는 직접 개발 환경을 구축하기 어렵다.
• “If you’re learning React or creating a new single-page app, use Create React App.”
• CRA 는 리액트로 웹 애플리케이션을 만들기 위한 환경을 제공한다.
• CRA 를 이용하면 하나의 명령어로 리액트 개발환경 구축이 가능하다.

CRA 에는 바벨, 웹팩과 같이 리액트 애플리케이션 실행에 필요한 다양한 패키지가 포함되어 있으며, 테스트 시스템, ES6+ 문법, CSS 후처리 등 거의 필수라고 할 수 있는 개발 환경도 구축해줍니다.

이런 개발 환경을 직접 구축할 경우 시간이 오래 걸릴 뿐 아니라 유지 보수도 해야합니다. CRA 를 이용하면 개발 환경을 세팅해주기 때문에 기존 기능을 개선하거나 새로운 기능을 추가했을 때 패키지 버전만 올리면 됩니다.

CRA 를 이용해 프로젝트 구성하기

npx create-react-app 프로젝트이름

CRA 는 우리가 프로젝트를 진행할 때 필요한 여러 도구들을 구성해주면서 자동으로 git 을 init 해주고 커밋을 남겨준다.

VSCode 를 통해 프로젝트를 오픈할 때 반드시 프로젝트 폴더를 오픈해야 한다. 정확하게 프로젝트 폴더를 오픈하지 않으면 추후 설정할 여러가지 세팅 및 VSCode 에서 제공해주는 여러가지 기능들이 생각대로 동작하지 않을 수 있다.

프로젝트 실행하기

npm start

브라우저에서 http://localhost:3000 또는 http://192.168.0.68:3000 으로 접속하면 CRA 가 구성해준 초기 페이지가 실행되는 것을 확인할 수 있다.

Component

재활용 가능한 UI 구성 단위

• 코드 재활용성 증가
• 코드 유지보수 용이
• 해당 페이지가 어떻게 구성되어 있는지 파악 용이
• 컴포넌트는 또 다른 컴포넌트를 포함 (부모 컴포넌트 - 자식 컴포넌트)

Class Component

• 초기에 많이 사용되던 컴포넌트 형태
• 함수형에 비해 문법과 사용법이 복잡함
• 하지만 클래스형으로 작성되어 있는 기존 코드들도 많이 남아있기 때문에 읽고 해석할 수 있어야 함

Function Component

• 클래스형 컴포넌트에 비해 간단하고 단순함
• 초창기에는 state를 관리하지 못한다는 단점으로 인해 잘 사용되지 않았음
• React 16.8 버전에서 hooks란 기능이 추가되면서 state를 관리할 수 있게 되어서 그 뒤로 자주 사용됨
• 실제 현업에서 가장 많이 사용되고 있음