1장 리액트 시작

1.1 왜 리액트인가?

1.1.1 리액트 이해

- 리액트는 오직 V(View)만 신경 쓰는 라이브러리이다.

- 리액트는 초기랜더링을 위해서 render 함수를 제공함. 

-  조화과정 - 리액트가 화면을 변경하는 방식. (변경 전후의 DOM Tree를 비교.)

 

1.2 리액트의 특징

1.2.1 Virtudal DOM

1.2.2 기타 특징

- 리액트는 뷰만 담당함. 다른 기능은 react-router, axios, redux, MobX등의 라이브러리를 사용하여 구현함.

 

1.3 작업 환경 설정

1.3.1 Node.js와 npm

- 설치 : macOS, Ubuntu

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash 

(Node.js 버전 관리를 위해 nvm을 설치)

$ nvm --version

(버전이 나타나지 않으면 추가 설정 필요)

$ nvm install --lts

(Node.js LTS 버전 설치)

 

- 설치 : Windows

https://nodejs.org/ko/download/ 에서 Window Installer를 내려받아 설치

 

1.3.2 yarn

- macOS (Homebrew를 사용하여 yarn을 설치)

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)" (Homebrew 설치 참조 :  https://brew.sh/index_ko)

$ brew update

$ brew install yarn 

$ yarn config set prefix ~/.yarn

$ echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bash_profile

 

1.3.3 에디터 설치

- VS code 설치.

- VS code 확장 프로그램 설치. ESLint, Reactjs Code Snippets(by charalampos karypidis), Prettier-Code formatter

1.3.4 Git 설치

- macOS https://git-scm.com/download/mac

1.3.5 create-react-app으로 프로젝트 생성하기

$ yarn create react-app hello-react

($ npm init react-app <프로젝트 이름>)

$ cd hellow-react

$ yarn start