가상 DOM(Virtual DOM)은 실제 DOM의 경량 JavaScript 표현으로, UI 변경 시 실제 DOM을 직접 조작하지 않고 메모리 내 가상 트리를 먼저 갱신한 뒤 최소한의 실제 DOM 변경만 수행하는 기법이다. React가 이 개념을 대중화시켰다.
동작 원리
1. 상태(state) 변경 발생
2. 새 Virtual DOM 트리 생성
3. 이전 Virtual DOM과 비교 (Diffing)
4. 변경된 부분만 실제 DOM에 반영 (Reconciliation)
React의 휴리스틱 O(n) 비교:
1. 루트 타입이 다르면 서브트리 전체 교체
2. 같은 타입이면 속성만 업데이트
3. key prop으로 리스트 아이템 식별
// key 없을 때 (비효율)
[A, B, C] → [X, A, B, C] // 전체 재렌더링
// key 있을 때 (효율적)
[A(1), B(2), C(3)] → [X(0), A(1), B(2), C(3)] // X만 추가
실제 DOM vs 가상 DOM
| 실제 DOM | 가상 DOM |
|---|
| 위치 | 브라우저 메모리 | JavaScript 메모리 |
| 조작 비용 | 비쌈 (리플로우/리페인트) | 저렴 (JS 객체 비교) |
| 업데이트 | 직접 수정 | 배치 처리 후 최소 업데이트 |
React Fiber
React 16+의 재구현된 Reconciler:
- 렌더링 작업을 작은 단위(Fiber)로 분할
- 우선순위에 따라 작업 중단/재개 가능
- Concurrent Mode: 사용자 입력 우선 처리
가상 DOM의 한계
가상 DOM 자체도 오버헤드다. Svelte는 컴파일 타임 최적화로 런타임 가상 DOM을 제거한다.
관련 개념
