[React-Basic-Hooks] 5. React Component 이해 about today_i_learned

[beecomci]

Reconciliation

React는 2가지를 이용해서 DOM 트리 탐색 알고리즘의 복잡도를 O(n)으로 줄임

1. 부모 노드 타입이 다르면 자식 노드는 비교하지 않는다.
2. 노드에 key를 부여하면 일일이 탐색하지 않고 접근 가능하다.

1. 부모 노드 타입이 다르면 자식 노드는 비교하지 않는다.

• React는 DOM 트리를 level-by-level로 탐색
• 부모 노드 타입이 바뀌는 순간 그 아래 모든 자식 노드들은 굳이 탐색할 필요 없이 언마운트되고 그 state도 사라지며 재렌더링됨
• Component나 노드 타입이 바뀌지 않는다면 최대한 렌더링하지 않는 방향으로 최소한의 변경 사항만 업데이트
  • Virtual DOM : 실제 DOM을 생성할 때 필요한 정보들을 담은 객체
  • 업데이트 할 내용이 생기면 Virtual DOM 내부의 프로퍼티만 수정 후 모든 노드에 걸친 업데이트가 끝나면 실제 DOM으로 렌더링 시도

2. 노드에 key를 부여하면 일일이 탐색하지 않고 접근 가능하다.

• React는 자식 노드들을 비교할 때 이전 목록과 다음 목록의 순서에 따라 업데이트 여부 결정

// 마지막 <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를 부여
• 그러면 노드 순서가 바뀌어도 기존 노드들은 그대로 두고 바뀐 노드만 렌더링 가능, 서브 트리 내에서만 unique하면 되고 전역에서 unique할 필요 X
• 배열의 index를 key로 사용하는 것은 지양 -> 항목의 순서가 바뀔 경우, key도 바뀌고 그 결과로 component의 state가 의도대로 동작하지 않을 수 있음