React 이론

React의 특징 : Virtual DOM

Virtual DOM은 이름그대로 가상의 DOM입니다.

React에서는 인터렉션이 발생하게 되면 바로 브라우저의 DOM에 접근하여 변화를 반영하는 것이 아니라 Virtual DOMDP 한번 렌더링하고, 이를 기존의 DOM과 비교를 하며 변화가 필요한 곳에만 렌더링 합니다. 쉽게 말해 바뀐 데이터로 전체 그림을 그려주고 비교한 다음, 바뀐 부분만 찾아서 바꿔주는 것입니다. 이런 작업을 통해 실제 브라우저에서 DOM의 조직을 최소화해줄 수 있습니다. DOM의 조작을 최소화하는 것은 곧 성능 문제로 직결되는 것이라 아주 중요한 이슈일 수 밖에 없는 것이죠.

 

《장점》

ⓐ 엄청나게 큰 생태계

ⓑ 글로벌 IT 기업을 포함한 여러기업에서 사용되는 라이브러리

└ Airbnb, Twitch, Khan, Academy, Facebook, Kakao, Naver 등 여러 기업에서 활발하게 사용하고 있다.

 

React 개발 환경 설정

Webpack, Babel 에 대해 알아볼까요?

React 프로젝트에서는 Webpack, Babel을 사용합니다.

React프로젝트에서는 수많은 컴포넌트가 존재하게 됩니다. 나중에 프로젝트를 시작하고 관리자모드를 켜면 알 수 있을텐데 root라는 id를 가진 div내에 모든 컴포넌트가 들어가게 됩니다. 이렇게 수많은 컴포넌트를 하나로 결합하는 데 사용되는 것이 Webpack입니다. 

그리고 React프로젝트에서는 ECMA Script라는 표준화된 자바스크립트 문법이 사용됩니다. 이 스크립트를 사용할 수 있게 해주는 것이 Babel입니다. 

 

React 개발 환경 구성

- Node.js 와 Yarn 설치

 

1 ) Node.js 

Node.js는 V8(자바스크립트 엔진)으로 빌드 된 이벤트 기반의 자바스크립트 런타임입니다. React Project를 구동시키기 위해서 필수적으로 설치해야합니다. 다만 윈도우와 맥에서의 설치방법이 다르므로 내 컴퓨터 운영체제에 해당하는 페이지로 가 Node.js를 깔고 다음 단계를 진행해주세요.

Node.js

Node.js

2 ) Yarn

Yarn은 패키지 매니저 모듈입니다. 원래 Node.js를 설치하면 npm이라는 패키지 매니저 모듈이 같이 설치되는데 Yarn은 npm보다 더 빠르고, 안정적이기 때문에 가능한 Yarn을 설치하시기를 바랍니다.

Yarn

Yarn

 

3 ) Create-react-app

Create-react-app은 간단한 React 개발 환경 구성을 위해 페이스북에서 개발한 라이브러리입니다.

 

Create-react-app