• state나 props가 갱신되면 새로운 react 엘리먼트 트리 반환
• n개의 엘리먼트에 대해 O(n) 복잡도 - 휴리스틱 알고리즘 사용
  • 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어낸다
  • 개발자가 key prop를 통해, 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야 할지 표시

비교 알고리즘

2개 트리 비교시, 루트부터 비교
이후의 동작은 루트 엘리먼트의 타입에 따라 다름

dom 엘리먼트의 타입이 다른 경우

• <a> → <img> 등 태그가 바뀌면 기존 트리를 버리고 완전히 새로 트리를 구축
• 트리를 버릴 때 이전 dom 노드 모두 파괴
• 새트리가 만들어질때 새 dom 노드들이 dom에 삽입
• 이전 트리와 연관된 state 모두 사라짐

dom 엘리먼트의 타입이 같은 경우

• 두 엘리먼트의 속성 확인해 동일한 내역을 유지하고 변경된 속성들만 갱신
• dom 노드 처리가 끝나면 react는 이어서 노드의 자식들을 재귀적으로 처리