[React] React와 개발환경 구축

React

React는 페이스북에서 개발한 프론트엔드 프레임워크 중 하나이다.

Component라는 독립적인 코드블록을 조합해 빠르고 효율적으로 화면을 수정한다.

가상화면 기술(Virtual DOM)을 도입했기 때문에 코드의 복잡성이 줄고, 화면 출력 속도를 증가시켰다.

Hot reloading이라는 모듈이 있어 리액트 앱을 구동한 상태에서 파일을 수정하고 저장하면 즉시 화면이 바뀐다.

 

 

개발환경 구축

React를 사용해서 웹 개발을 하기 위해서는 NVM, Node.js, yarn, create-react-app이 필요하다.

아래 Node.js 공식 사이트에서 LTS 버전을 설치할 수 있다. 

Node.js

또는 Homebrew를 이용해 설치한다

brew install node

 

NVM

Node.js를 설치하거나 버전을 관리해주는 프로그램으로, Node.js를 설치하면 같이 설치된다.

NPX

일회성으로 최신 버전의 노드 패키지를 내려받아 설치하는 노드 패키지

npm install npx -g

아래와 같은 명령어로 잘 설치되었는지 버전을 확인해본다.

node -v
npm -v
npx -v

yarn

페이스북에서 npm의 단점을 보완해 속도와 성능을 개선한 라이브러리 관리도구이다.

brew install -g yarn

create-react-app

프로젝트 구조와 설정 등을 자동으로 만들어주는 도구로 다양한 스크립트와 기능들이 포함되어있다.

아래와 같은 명령어로 실행한다.

npx create-react-app folder-name
cd folder-name
npm start

종료하는 경우 ctrl + C 명령어로 종료한다.