[React] Diffing 알고리즘

Diffing Algorithm

React 의 Render 함수는 jsx 문법에 맞는 React Element 를 반환합니다. 

이때 상태가 변하거나 프로퍼티가 변해서 DOM을 업데이트해야 하는 경우에 변경된 부분만 감지해서 바뀐 부분만 업데이트 하는 방식을 취하게 되는데, 이 변경된 부분을 감지하는 방법을 Diffing Algorithm 이라고 합니다. 

 

여기서 "비교"란 Virtual DOM 끼리의 비교를 의미하며, React는 이전상태와의 비교를 위해 항상 이전 상태의 Virtual DOM의 사본을 유지한다. 

 

React 가 DOM 트리를 탐색하는 방법

React는 기존의 가상 DOM 트리와 새롭게 변경된 가상 DOM 트리를 비교할 때, 트리의 레벨 순서대로 순회하는 방식으로 탐색한다. 즉 같은 레벨(위치)끼리 비교한다는 뜻이다.

자료출처 코드스테이츠

React는 동일선상에 있는 노드를 파악한  뒤 다음 자식 세대의 노드를 순차적으로 파악해 나간다. 

 

다른 타입의 DOM 엘리먼트인 경우

• 부모 태그가 달라진다면 React는 이전 트리를 버리고 새로운 트리를 구축한다.
• 새로운 트리를 구축하기 때문에 이전의 DOM 노드들은 전부 파괴된다. 

 

같은 타입의 DOM 엘리먼트인 경우

타입이 바뀌지 않는다면 React는 최대한 렌더링을 하지 않는 방향으로 최소한의 변경 사항만 업데이트 한다. 

 

1. 같은 계층

비슷한 컴포넌트는 트리 내에 동일한 계층에 위치 할 것이다. 따라서 이 컴포넌트가 갑자기 부모가 바뀌거나 하는 일이 없다고 가정하고 같은 게층에 있는 컴포넌트들끼리 비교하자

 

2. key 가 있는지 확인하자

하나의 jsx 태그는 자바스크립트로 객체로 구성되어 있다. 이 객체에는 해당 객체가 React의 Virtual DOM 의 요소임을 확인해주는 symbol 값과, 각각의 Virtual DOM을 고유하게 구분하는 key 값이 들어가게 되며, map 등을 통해 생성된 요소들의 경우 고유한 key 들이 있다. React는 이 key 들의 비교를 통해 리스트의 요소가 추가되거나 삭제되었을때. 해당 내용을 빠르게 감지하고 반영할 수 있다.