React가 Virtual DOM의 이전 트리와 새 트리를 비교하여 최소한의 DOM 변경만 수행하는 핵심 알고리즘입니다.
React는 render()가 호출될 때마다 새로운 React 엘리먼트 트리를 생성합니다. 이전 트리와 새 트리의 차이를 효율적으로 계산하기 위해 O(n) 휴리스틱 알고리즘을 사용합니다. 두 가지 핵심 가정이 있습니다: 다른 타입의 엘리먼트는 다른 트리를 생성하며, key prop으로 자식 엘리먼트를 안정적으로 식별합니다.
각 시나리오를 선택하고 단계별로 진행하여 React가 트리를 어떻게 비교하는지 확인하세요.
실제 코드로 동작 원리를 확인하세요.
// React는 두 트리를 비교할 때 O(n) 휴리스틱을 사용합니다.
// 규칙 1: 다른 타입의 엘리먼트 → 트리를 버리고 새로 구축
// Before
<div>
<Counter />
</div>
// After — div → span 변경 시 Counter도 언마운트
<span>
<Counter /> // 새로운 인스턴스 (state 초기화)
</span>
// 규칙 2: 같은 타입의 엘리먼트 → 속성만 비교
// Before
<div className="old" title="stuff" />
// After — className만 변경
<div className="new" title="stuff" />
// → DOM에서 className만 업데이트O(n³)이지만, React는 두 가지 휴리스틱으로 O(n)으로 최적화합니다: 1) 다른 타입의 엘리먼트는 다른 트리를 생성한다고 가정 2) key prop으로 자식 엘리먼트의 안정적 식별key는 React가 리스트의 각 항목을 고유하게 식별할 수 있게 해줍니다. key가 없으면 인덱스 기반으로 비교하여 앞에 항목을 추가할 때 모든 항목이 변경된 것으로 간주됩니다. key가 있으면 같은 key끼리 비교하므로 기존 DOM 노드를 재사용하고 새 항목만 삽입합니다.index를 key로 사용하면 순서 변경 시 key가 없는 것과 동일한 문제가 발생하며, 컴포넌트의 state가 꼬일 수 있습니다.작은 단위(unit of work)로 나누고, 우선순위에 따라 작업을 중단하고 재개할 수 있습니다. 이를 통해 애니메이션, 사용자 입력 등 긴급한 업데이트를 먼저 처리하는 Concurrent Mode의 기반이 됩니다. 각 Fiber 노드는 컴포넌트의 상태, 작업 유형, 부모/자식/형제 참조를 가진 연결 리스트 구조입니다.