재조정 (Reconciliation) 동작원리

비교 (diffing) 알고리즘

두 개의 트리를 비교할 때, React는 두 엘리먼트의 루트(root) 엘리먼트부터 비교합니다. 이후의 동작은 루트 엘리먼트의 타입에 따라 달라집니다.

1. 루트(root) 엘리먼트부터 비교합니다.

2. 루트 엘리먼트의 타입에 따라 달라집니다.

   여기서 타입이란 html tag가 달라지면 이전 트리를 버리고 새로운 트리를 구축

   e.g) <a>태그에서 <img>태그로 변경 되는 경우

   트리를 버릴 때 이전 DOM 노드들은 모두 파괴됩니다. 컴포넌트 인스턴스는 componentWillUnmount()가 실행됩니다. 새로운 트리가 만들어질 때, 새로운 DOM 노드들이 DOM에 삽입됩니다. 그에 따라 컴포넌트 인스턴스는 UNSAFE_componentWillMount()가 실행되고 componentDidMount()가 이어서 실행됩니다. 이전 트리와 연관된 모든 state는 사라집니다.
   componentWillUnmount: 컴포넌트가 마운트 해제되어 제거되기 직전에 호출
   *UNSAFE_componentWillMount()는 마운트가 발생하기 전에 호출됩니다. render()가 실행되기 전에 호출되므로, 이 메서드 내에서 setState()를 동기적으로 호출하더라도 추가적인 렌더링이 발생하지 않습니다. state를 초기화하는 경우라면, 보통은 constructor()를 사용하는 것이 좋습니다.

3. 타입이 같은 경우에는 두 엘리먼트 속성을 확인하여 동일한 내역은 유지하고 변경된 속성들만 갱신 합니다.

   e.g)

   // className만 수정합니다. 
   <div className="before" title="stuff" />
   
   <div className="after" title="stuff" />

   // style 안에서도 color 속성만 갱신 합니다.
   <div style={{color: 'red', fontWeight: 'bold'}} />
   
   <div style={{color: 'green', fontWeight: 'bold'}} />

자식에 대한 재귀적 처리

// 두 트리에서  <li>first</li>  <li>second</li>가 일치 하는것을 확인하고 <li>third</li>를 트리에 추가합니다. 

<ul>
  <li>first</li>
  <li>second</li>
</ul>

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

// 종속 트리를 그대로 유지하는 대신 모든 자식을 변경합니다. 이 방식은 비효율적일 수 있습니다. 

<ul>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

<ul>
  <li>Connecticut</li>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

Key

위와 같은 문제를 해결하기 위해 key속성을 지원합니다. 자식들이 key를 가지고 있다면, React는 key를 통해 기존 트리와 이후 트리의 자식들이 일치하는지 확인합니다.

// '2014' key를 가진 엘리먼트가 새로 추가되었고, '2015'와 '2016' key를 가진 엘리먼트는 그저 이동만 하면 되는 것을 알 수 있습니다.

<ul>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

<ul>
  <li key="2014">Connecticut</li>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

이러한 상황에 해당하지 않는다면, 여러분의 데이터 구조에 ID라는 속성을 추가해주거나 데이터 일부에 해시를 적용해서 key를 생성할 수 있습니다. 해당 key는 오로지 형제 사이에서만 유일하면 되고, 전역에서 유일할 필요는 없습니다.

최후의 수단으로 배열의 인덱스를 key로 사용할 수 있습니다. 항목들이 재배열되지 않는다면 이 방법도 잘 동작할 것이지만, 재배열되는 경우 비효율적으로 동작할 것입니다.

인덱스를 key로 사용 중 배열이 재배열되면 컴포넌트의 state와 관련된 문제가 발생할 수 있습니다. 컴포넌트 인스턴스는 key를 기반으로 갱신되고 재사용됩니다. 인덱스를 key로 사용하면, 항목의 순서가 바뀌었을 때 key 또한 바뀔 것입니다. 그 결과로, 컴포넌트의 state가 엉망이 되거나 의도하지 않은 방식으로 바뀔 수도 있습니다.

ref
https://ko.legacy.reactjs.org/docs/reconciliation.html