REACT Intro.2 렌더링 원리

 

1. Virtual DOM

-HTML 자체는 정적인 문서이다. DOM API를 이용하여 문서를 동적으로 만들 수 있다.

-DOM을 조작하여 변화를 주면 브라우저는 DOM을 화면에 리페인트 한다. 다시 레이아웃을 구성하고 다시 스타일을 입힌다. 

-리액트는 실제 DOM의 사본인 가상 DOM을 만들어 전후를 비교한 후 변화된 부분만 리페인트 하는 방식으로 성능을 크게 개선시킨다.

-가상 DOM(가상의 UI 요소)을 메모리에 저장하고, 이를  ReactDOM 라이브러리를 통해 실제 DOM과 동기화한다.

 

2. Reconciliation (재조정)

-변경된 새 가상 DOM과 이전의 가상 DOM을 비교하여 바뀐 부분만 실제 DOM에 반영하여 업데이트하는 것을 말한다.

-리액트 컴포넌트는 state, props, context가 업데이트되면 재평가 된다. 업데이트된 현재의 스냅샷과 바로 직전의 스냅샷을 비교하여 변경된 부분만 실제 돔에 적용한다.

-만약 여러 상태에 변화가 있을 경우 이를 일일이 수행하지 않고 일괄적으로 한 번에 업데이트(Batching update)하여 성능을 최적화한다.

 

*Batching update: 리액트는 state update를 예약(스케쥴링)으로 처리한다. 동일한 프로미스에서 여러 상태 갱신 함수가 호출되면 모두 같은 시점에 스케쥴링되어 처리된다. 각 상태 갱신 함수가 실행될 때마다 컴포넌트가 리렌더링 되는 것이 아니다!!

 

 

 

*부모 컴포넌트가 업데이트 되면 자식 컴포넌트들 또한 모두 재평가되지만 리렌더링은 실제 달라진 부분에서만 일어난다. 자식 컴포넌트의 재실행을 제한하고 싶다면 React.memo 등 리액트의 최적화 테크닉을 활용할 수 있다.