🔍 React Diffing Algorithm

React가 변경 전 Virtual DOM과 변경 후 Virtual DOM을 비교할 때, 기존의 Virtual DOM Tree를 변경 후 새로운 Virtual DOM Tree로 변형 시키는 가장 작은 조작 방식의 알고리즘을 알아내야 했다.

이 때,

• 각기 서로 다른 두 요소는 다른 트리를 구축한다.
• 개발자가 제공하는 key 프로퍼티를 가지고, 여러 번 렌더링을 거쳐도 변경되지 말아야 하는 자식 요소가 무엇인지 알아낼 수 있다.

위의 2가지 가정을 가지고 시간 복잡도 O(n)의 비교 알고리즘(Diffing Algorithm)을 구현해 사용한다.

👀 React의 DOM Tree 탐색 방법

기존의 Virtual DOM Tree와 새롭게 변경된 Virtual DOM Tree를 비교할 때, Tree의 level 순서대로 순회하는 방식으로 탐색한다.(너비우선탐색(BFS)의 일종)

✔ 다른 타입의 DOM element일 경우

HTML 태그마다 규칙이 있어, 그 아래의 자식 태그가 한정적이다.

따라서, 부모 태그가 달라지면 React는 기존의 Tree를 버리고 새로운 Tree를 구축하면서 이전의 DOM node들은 전부 없어진다.

즉, 새로운 컴포넌트가 실행되면서 기존의 컴포넌트는 완전히 해제되고, 그 아래 자식 컴포넌트가 state를 가지고 있었다면 갖고있던 기존의 state 또한 없어진다.

<div>
	<Counter />
</div>

//부모 태그가 div에서 span으로 변경.
<span>
	<Counter />
</span>

✔ 같은 타입의 DOM element일 경우

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

업데이트 할 내용이 생기면 virtual DOM 내부의 프로퍼티만 수정한 뒤, 모든 노드에 걸친 업데이트가 끝나면 그때 단 한번 실제 DOM으로의 렌더링을 시도한다.

<div className="before" title="example" />

//기존의 엘리먼트가 태그는 바뀌지 않은 채 className만 변경.
<div className="after" title="example" />

className before와 after이 각자 아래의 스타일을 가진다고 했을 때,

//className이 before인 컴포넌트
<div style={{color: 'red', fontWeight: 'bold"}} title="example" />

//className이 after인 컴포넌트
<div style={{color: 'blue', fontWeight: 'bold"}} title="example" />

정확히 color 스타일만 변경하며, 하나의 DOM node를 처리한 뒤에 이어서 밑의 자식들을 순차적으로 동시에 순회하면서 차이가 발견될 때마다 변경한다.(재귀적 처리)

✔ 자식 element의 재귀적 처리

위에서 밑의 자식들을 순차적으로 동시에 순회(기존 DOM Tree & 변경된 DOM Tree)한다고 했는데, 만일 자식 element 끝에 새로운 자식 element를 추가하는 경우엔 그 이전의 자식 node들이 일치하는 것을 확인 후 새로운 자식 node를 추가한다.

그러나, 아래와 같이 자식 element를 처음에 추가한다면 동시에 DOM Tree를 순회할 때, 최소한으로 동작하지 않는다.(각 n번째 자식 node들이 일치하지x)

<ul>
  <li>Apple</li>
  <li>Banana</li>
</ul>

//자식 엘리먼트를 처음에 추가.
<ul>
  <li>Grape</li>
  <li>Apple</li>
  <li>Banana</li>
</ul>

따라서 이 문제를 해결하기 위해 React에서 key라는 속성을 지원하며, 효율적으로 Virtual DOM을 조작할 수 있도록한다.(key값을 설정하지 않을 시, 경고문을 띄우는 이유=key값이 없을 경우 node가 비효율적으로 동작할 수 있다.)

따라서, 아래와 같이 자식 노드들에게 key를 설정해주면, 해당 key를 이용해 효율적으로 두 Tree를 비교할 수 있다.

이때, key값은 보통 DB상의 유니크한 값(ex.id)를 부여하며, 전역적으로 유일할 필요는 없고 형제 element 사이에서만 유일하면 된다.(최후의 수단으로 index 사용 가능)

<ul>
  <li key="a">Apple</li>
  <li key="b">Banana</li>
</ul>

//key가 g인 자식 엘리먼트를 처음에 추가.
<ul>
  <li key="g">Grape</li>
  <li key="a">Apple</li>
  <li key="b">Banana</li>
</ul>

Reference: 코드스테이츠