Virtual DOM란?

Virtual DOM이란?

실제 DOM 조작은 비용이 크다. JS 객체로 된 가벼운 트리 복제본에서 먼저 변경을 계산하고, 실제 DOM에는 최소한의 변경만 반영하는 기법이다.

동작 흐름

1. 상태 변경 → 새 Virtual DOM 트리 생성
2. 이전 트리와 diff 비교 (Reconciliation)
3. 변경된 부분만 실제 DOM에 적용

최신 경향

Svelte, Solid.js는 VDOM 없이 컴파일 타임에 DOM 조작 코드를 직접 생성해 더 빠르다. Vue 3.6 Vapor Mode도 유사 방향. VDOM이 만능은 아니다.