[React] Rendering과 Virtual DOM

Rendering

렌더링 트리거

1) 첫 리액트 앱을 실행했을 때

 

2) 리액트 내부에서 state 변경이 발생했을 때

- 컴포넌트 내부 state가 변경됐을 때

- 컴포넌트에 새로운 props가 들어올 때

- 상위 부모 컴포넌트에서 위의 두 이유로 렌더링이 발생했을 때

 

리렌더링

- 컴포넌트 상태에 변화가 생길 때 발생

- 여러 상태가 변경됐다면 리액트는 큐 자료구조에 넣어 순서를 관리함

 

브라우저 렌더링

- 브라우저 렌더링과 리액트 렌더링은 서로 다른, 독립적인 프로세스

- 렌더링이 완료되고 React가 DOM을 업데이트 → 브라우저 렌더링 (or 페인팅)

 

브라우저 렌더링 (페인팅) 원리

React, Vue.js는 가상돔(Virtual DOM)을 이용해 원하는 화면을 브라우저에 그려준다.

 

Virtual DOM 생성

리액트는 항상 두가지 버전의 가상DOM을 갖고있다.

1) 화면이 갱신되기 전 구조를 담고있는 가상 DOM 객체

2) 화면 갱신 후 보여야 할 가상 DOM 객체 → state가 변경됐을 때 리렌더링하기 위해 가상돔 생성

 

Diffing

state가 변경되면 생성된 가상돔과 이미 갖고있던 가상돔을 비교해 어떤 부분에서 변화가 일어났는지 빠르게 파악

 

Reconciliation (재조정)

파악이 끝났다면 변경이 일어난 부분만 실제 DOM에 적용

* Batch Update: 변경 사항들을 DOM에 하나하나 적용시키는 것이 아니라 모두 모아 한번에 적용시킴