React는 프런트엔드 프레임워크 중 하나이다.
React는 페이스북을 개발할 때 사용한 기술이며 공개 소프트웨어이고, '화면 출력에 특화된 프레임 워크'이다.
컴포넌트(component)
React는 컴포넌트라는 작고 독립적인 코드 블록을 조합하여 빠르고 효율적으로 구성할 수 있어 관리 유지 보수 및 개발하는데 상단한 편의성을 준다.
가상화면 기술 게임 엔진(virtual DOM)
또한 가상화면 기술 게임 엔진을 도입하여
(다음에 나타날 화면의 일부(노드)를 미리 그려 놓고 변경된 화면의 일부(노드)만 수정하는 가상화면 기술) 화면 출력 속도를 높이고, 코드의 복잡성도 줄여 화면의 일부분만 수정되어도 화면전체를 다시 그리는 고질적인 문제를 해결했다.
단반향 데이터 흐름
그리고 React는 다른 MVC구조와 다르게 단방향 데이터 흐름을 지향한다.
단뱡향 데이터 흐름은 양방향보다 데이터를 감지하는데 부담이 적고 단순한 데이터 흐름으로 이해하기 쉬우며 쉬운 어플리케이션을 만들 수 있다.
React 공식 사이트 : https://ko.reactjs.org/
추가로 npm과 WebPack
npm은 https://www.npmjs.com에서 필요한 라이브러리를 내려받아 설치/삭제등 관리해주는 프로그램이다.
npm은 실제로 node_modules폴더에 라이브러리를 내려받아 저장하고, package.json이라는 파일에 설치된 라이브러리의 정보를 적어 저장한다.
실제 라이브러리와 러이브러리 명세파일을 따로 관리하여, 프로젝트를 공유 할 때 라이브러리 명세와 핵심 코드만 전달하면 package.json의 목록을 이용하여 쉽게 라이브러리를 내려받을 수 있다. 현재는 npm이 아니라 페이브북에서 npm의 단점을 보완하여 성능과 속도를 개선한 yarn을 사용한다. 사용방식을 비슷하다.
WebPack은 프로젝트에 사용된 파일을 분석하여 기존 웹문서 파일로 변환하는 도구이다. 웹브라우저가 해석 할 수 없는 .hbs, .cjs, .sass등 파일을 웹팩이 분석하여 .js, .css등의 파일로 변환해준다.
요약
React는 페이스북이 제작한 Javascript 라이브러리
컴포넌트 구조로 UI를 캡슐화 하였으며 단방향 데이터 흐름과 가상 돔을 채택하여 성능 이슈를 해결
가상 돔은 실제 돔과 비교하여 변경 된 부분만 확인하여 실제 돔에 업데이트 하는 방식
이는 기존 DOM을 업데이트 하는 구조에서 브라우저의 리소스를 사용하지 않고 업데이트 함으로써 성능 이슈를 해결
다음은 리액트 개발환경 설치를 해보겠습니다.
