본문 바로가기

react

react - react의 update 방식, Reconciliation

Reconciliation이란?

 

 

기존의 javascript 방식에서는 어떤 데이터가 변경되었는지를 확인하기 위해

 

DOM(Document Object Model)을 직접 변경해야만 했다. 그러나 react는 다른 방식을 사용한다.

 

이때 virtual DOM이라는 방식을 이용하는데,

 

components가 처음 초기화되면, render 메서드가 호출되어 메모리에 virtual dom이라는 또 다른 DOM을 생성한다. 

 

데이터에 변화가 일어나면, render 메서드가 다시 호출된다. 이때 react는 이전 값과의 최소한의 차이만을

 

디텍팅하여, DOM에 반영시킨다.  이 과정을 reconciliation이라고 한다.

 

 

React는 위의 그림처럼 vitual dom과 real dom의 차이를 detect하여 (어떤 element가 변화되었는지) update를 진행한다.

 

그 이후, 웹 페이지가 변화하여 최종 Update가 완료된다. 즉 dom 전체를 다시 그리는 방식이 아닌,

 

최소한의 변화만 다시 update하는 효율적인 방식이라고 할 수 있다.

 

 

관련 문서

 

https://medium.com/@ryanbas21/react-reconciliation-7075e3f07437

 

React Reconciliation?

Let’s talk Reconciliation!

medium.com

https://reactjs.org/

 

React – A JavaScript library for building user interfaces

A JavaScript library for building user interfaces

reactjs.org