- React 의 특징
- 기존 JS에서는 Data를 수정한 뒤 View를 다시 호출해줘야 화면이 바뀐다.
- Data만 수정해도 바뀌도록 하는것이 React
- Reactive 하다
- 특정값에 의해 자동으로 반응한다.
- 값을 setting할때 render를 불러서 화면을 다시 그리도록 한다.
- 데이터의 변화시마다 UI에 반영하려면 DOM API를 호출해야 한다.
- DOM API의 잦은 호출은 브라우저의 성능에 영향을 줄 수 있다.
- 주요 렌더링 경로 (Critical Render Path) : 브라우저가 HTML과 CSS를 이용해서 화면을 그리는 과정
- HTML 코드를 파싱해서 DOM 트리로 만든다.
- CSS 코드를 CSSOM 트리로 만든다.
- 두 트리를 합쳐 렌더트리로 만든다.
- 레이아웃을 계산해서 픽셀로 화면에 그린다.
- 돔 구조를 변경할때마다 레이아웃을 다시 계산해서 화면에 그린다.
- 가상돔을 통해서 호출 횟수를 줄일 수 있다.
- 어플리케이션은 화면 변경을 가상 돔에 요청한다.
- 렌더링할때마다 가상 돔을 새로 만들어 이전 가상돔과 차이를 찾는다.
- 차이가 있는 부분만 실제 돔에 반영한다.