[ React ] 리액트의 Render에 대하여:: Virtual DOM과 리렌더링

Recat의 렌더링 과정

 

1. 데이터 변경 감지 Data Change (State/Props)

React는 상태(State)와 속성(Props)를 모니터링해 데이터의 변경을 감지한다.

상태가 변경되거나 부모 컴포넌트로부터 새로운 속성을 받았을 때,

React는 컴포넌트를 리렌더링해야 할 필요가 있는지 확인한다.

 

2. 가상 DOM 생성 Createing Virtual DOM

데이터 변경이 감지되면, React는 가상 DOM을 생성한다.

 

***가상 DOM ( Virtual DOM )

메모리 상에 존재하는 가벼운 복사본으로 실제 DOM과 유사한 계층 구조를 갖는다.

가상DOM은 실제 DOM과 동기화 되지 않고 독립적으로 존재한다.

 

 

3.가상 DOM 비교하기 Comparing Virtual DOM

이전에 생성된 가상 DOM과 새로 생성된 DOM을 비교해 변경된 부분을 찾는다.

 

4.실제 DOM 업데이트 Updating DOM

변경된 부분만 찾아 실제 DOM에 반영한다.

이렇게 되면 불필요한 리렌더링은 피할 수 있어 성능을 향상 시킬 수 있다.

 

 

★기존 엘리먼트를 변경하는 것이 아니라

새로운 엘리먼트를 생성해 변경된 부분만 실제 DOM에 반영.

엘리먼트는 한 번 생성시 바꿀 수 없음.(불변성, 생성 후 자식이나 속성을 바꿀 수 없음)

 

그러면 실제DOM에 있던 원래의 엘리먼트는 어떻게 될까?

실제 DOM은 브라우저(웹 엔진)에 의해 관리되는데, 

원래의 엘리먼트는 더 이상 필요하지 않기에 브라우저가 메모리에서 제거한다.