리액트의 특징

 

리액트(React)
ㄴReact는 페이스북에서 개발한 UI 라이브러리로 재사용 가능한 UI를 생성할 수 있게 해준다.
ㄴReact는 라이브러리긴 하지만 Redux, react-router와 함께 프레임워크처럼 사용된다.
ㄴReact는 Virtual DOM이라는 개념을 사용하여 상태 변화에 따라 선택적으로 UI를 렌더링한다.

DOM (Document Object Model)
ㄴ객체를 통해 구조화된 문서를 표현하는 방법. (XML,HTML로 작성)
ㄴ웹 브라우저(클라이언트)는 DOM을 통해서 javascript, css를 적용한다.

DOM의 문제점
ㄴDOM API의 최대 문제점은 동적 UI에 최적화되지 않음이다.
ㄴ대규모 애플리케이션 또는 수 많은 데이터가 로딩되고 표현해야하는 애플리케이션에서 DOM에 직접 접근하여 프론트엔드에 변화를 주다 보면 성능상에 문제가 발생한다.
ㄴDOM변화가 있을 때마다 css를 다시 연산하고 레이아웃을 구성한 뒤 페이지를 그린다. (이게 오래 걸림)
ㄴ레이아웃을 구성을 계산하는 것이 reflow, 레이아웃에 관계없는 것들을 처리하는 것이 repaint라 한다.
ㄴ시간내에 reflow가 여러번 발생하려고 하면 이 작업들을 모아서 한 번에 처리한다.
ㄴ최적화를 하지 못할 때가 있어서 reflow 횟수를 줄이기 위해 노력해야 한다.
ㄴ최소한의 DOM조작을 해야 한다.

Virtual DOM
ㄴVirtual DOM을 사용하면 실제 DOM에 접근해서 변경하는 대신, 추상화시킨 자바스크립트 객체를 구성하여 사용한다. (DOM사본)

React에서 처리과정
1) 데이터로드
2) Virtual DOM에 렌더링
3) 이전 렌더링 내용과 Virtual DOM에 있는 내용을 비교
4) 바뀐 부분만 DOM에 적용

리액트를 사용하는 이유
ㄴ Virtual DOM을 통한 UI 업데이트 간결화 및 컴포넌트의 유지보수가 유용


리액트를 시작하는 가장 쉬운 방법은 create-react-app을 이용하는 방법이다.
환경설정할 때 babel, webpack 등을 설치해야 하지만 create-react-app으로 리액트 애플리케이션을 만들면
이러한 작업들을 create-react-app이 대신 설정해주고 숨겨준다.

 

 

 

출처 표기해 주세요 ★