본문 바로가기

카테고리 없음

리액트 재정리

리액트의 등장 이유

=> 애플리케이션이 복잡해짐에 따라 뷰를 업데이트하는 로직이 고임.

=> 어렵게 이럴 필요없이 다 날려버리고 다시 그리자!

=> 리소스가 많이 들테니 virtual dom에 그려주고 달라진 부분만 비교해서 업데이트하자.

 

*DOM(Document Object Model)이란 :

객체로 문서 구조를 표현하는 방법. XML이나 HTML 사용.

 

DOM은 느린가 생각해보면 그렇지 않아. 웹 브라우저 단에서 DOM에 변화가 생기면 CSS가 이를 다시 연산하고, 레이아웃을 구성한 후, 페이지를 리페인트합니다. 이 과정에서 시간이 허비되지요. 페이스북의 경우 하나의 포스트가 1000개의 div를 포함.  즉, 리액트는 이 연산의 단위를 최소화해주는 역할입니다.

 

리액트는 프레임워크가 아니라 라이브러리입니다. 뷰만 담당합니다!

다른 프레임워크가 라우팅, Ajax등을 내장한 반면, React는 다른 라이브러리를 같이 사용합니다. 

(e.g. 라우팅: react-router, Ajax: axios, ...)

혹은 다른 프레임워크와 사용도 가능(Backbone, AngularJs)

 

빌드

여러 파일로 분리된 프로젝트를 합치는 일. + ES6의 문법을 구버전의 코드로 바꾸는 일

 

성능 최적화

shouldComponentUpdate