정의
가상 DOM(Virtual DOM)은 웹 브라우저의 실제 문서 객체 모델(Document Object Model, DOM)의 추상화된 복제본을 메모리 상에서 관리하는 기술을 말한다. 애플리케이션의 상태 변화에 따라 가상 DOM 트리를 업데이트하고, 이전 버전과 비교(diff)하여 최소한의 실제 DOM 조작만을 수행함으로써 UI 업데이트의 효율성을 높인다.
개요
가상 DOM은 주로 React, Vue.js, Preact 등과 같은 현대적인 프론트엔드 라이브러리와 프레임워크에서 사용된다. 개발자는 선언형으로 UI를 기술하고, 프레임워크는 내부적으로 가상 DOM을 활용해 변경 사항을 계산한다. 이 과정에서 발생하는 실제 DOM 조작은 브라우저 렌더링 비용이 높은 작업으로 간주되기 때문에, 변경이 필요한 부분만 선택적으로 적용함으로써 성능을 최적화한다. 가상 DOM은 자바스크립트 객체 트리 형태로 구현되며, 실제 DOM과 1:1 매핑을 유지하지 않는다.
어원/유래
‘가상 DOM’이라는 용어는 영문 “Virtual DOM”을 직역한 것으로, “virtual(가상의)”과 “DOM(Document Object Model)”의 결합이다. 가상 DOM 개념은 2013년 Facebook이 발표한 React 라이브러리에서 처음 널리 알려졌다. 이후 다른 프레임워크와 라이브러리에서도 동일한 원리를 차용하거나 변형하여 구현하고 있다.
특징
| 구분 | 내용 |
|---|---|
| 추상화 수준 | 실제 DOM을 직접 조작하지 않고, 메모리상의 자바스크립트 객체 트리로 UI 상태를 표현한다. |
| 변경 감지 | 상태 변화 시 새 가상 DOM 트리를 생성하고, 이전 트리와 비교(diff)하여 변경점(dirty nodes)을 도출한다. |
| 최소 업데이트 | 변동된 부분만 실제 DOM에 적용함으로써 레이아웃·리페인트 비용을 최소화한다. |
| 불변성(Immutable) 패턴 | 대다수 구현에서 가상 DOM 트리는 불변 객체(immutable)처럼 다루어, 변경 시 전체 트리를 새로 만든다. |
| 배치 처리 | 여러 상태 변화를 하나의 렌더 사이클에 묶어 한 번에 diff 및 업데이트를 수행한다. |
| 플랫폼 독립성 | 브라우저 환경뿐 아니라 서버 사이드(Node.js)에서도 가상 DOM을 사용해 초기 HTML을 생성할 수 있다. |
| 표준 비포함 | 가상 DOM은 W3C나 WHATWG와 같은 표준 조직에 정의된 공식 사양이 아니며, 각 프레임워크가 자체적으로 구현한다. |
관련 항목
- DOM (Document Object Model) – 웹 문서 구조를 프로그래밍적으로 접근·조작하기 위한 표준 인터페이스.
- React – 가상 DOM을 핵심으로 채택한 UI 라이브러리; Facebook이 2013년 공개.
- Vue.js – 가상 DOM 기반의 선언형 UI 프레임워크.
- Diff 알고리즘 – 두 가상 DOM 트리를 비교하여 최소 변경 집합을 도출하는 알고리즘. React에서는 “reconciliation” 과정에서 이를 수행한다.
- 재조합(Reconciliation) – 가상 DOM의 diff 결과를 실제 DOM에 적용하는 단계.
- 불변 데이터 구조 – 가상 DOM 구현 시 효율적인 변경 감지를 위해 사용되는 데이터 패턴.
- 서버 사이드 렌더링(SSR) – 가상 DOM을 서버 환경에서 실행해 초기 HTML을 미리 생성하는 기법.
※ 본 문서는 확인된 공신력 있는 자료를 기반으로 작성되었으며, 최신 프레임워크 버전에서의 세부 구현 방식은 각각의 공식 문서를 참조한다.