가상 DOM(Virtual DOM)은 웹 프런트엔드 개발, 특히 JavaScript 기반 사용자 인터페이스(UI) 프레임워크에서 사용되는 프로그래밍 개념으로, 실제 DOM(Document Object Model)의 구조를 메모리상에 경량화된 JavaScript 객체 트리로 표현한 것을 가리킨다. 실제 DOM을 직접 조작하는 대신 가상의 DOM을 먼저 변경하고, 이를 실제 DOM과 비교하여 변경된 부분만 선택적으로 반영하는 방식으로 동작한다.
개념의 배경
DOM은 웹 페이지를 구성하는 HTML 요소들을 JavaScript가 접근·조작할 수 있도록 구조화한 객체 모델이다. 웹 애플리케이션의 규모가 커지고 상태(state) 변경이 빈번해지면서, 실제 DOM을 직접 조작할 때 발생하는 성능 비용이 문제로 대두되었다. 실제 DOM은 브라우저의 렌더링 파이프라인(레이아웃, 페인트 등)과 연결되어 있어, 요소의 변경이 곧 브라우저의 재계산·재렌더링으로 이어질 수 있다. 가상 DOM은 이러한 비용을 줄이기 위한 수단으로 제안된 개념이다.
동작 원리
가상 DOM의 동작은 일반적으로 다음과 같은 단계로 설명된다.
- 가상 DOM 트리 생성: UI를 표현하는 JavaScript 객체 트리를 메모리상에 생성한다. 예를 들어 React에서는 JSX가 컴파일되어
createElement()호출로 변환되고, 이 함수가 가상 DOM 노드(ReactElement)를 반환한다. - 변경 감지 및 비교(diff): 상태 변경이 발생하면 새 가상 DOM 트리가 생성되고, 이전 가상 DOM 트리와 비교(reconciliation) 과정을 거친다. 두 트리의 노드 속성(attributes), 텍스트 내용, 자식 요소 등을 비교하여 실제 DOM에 반영해야 할 변경 사항을 식별한다.
- 실제 DOM 동기화: 비교 과정에서 식별된 변경 사항만 실제 DOM에 반영한다. 이를 통해 변경되지 않은 부분을 건드리지 않고 최소한의 조작으로 화면을 갱신한다.
이 비교 알고리즘을 diff 알고리즘 또는 재조정(reconciliation) 알고리즘이라고 부른다.
대표적인 사용 사례
가상 DOM 개념은 React가 널리 알리면서 대중화되었다. React는 JSX 문법을 통해 UI를 선언적으로 기술하고, 내부적으로 가상 DOM과 재조정 과정을 활용한다. 이 밖에도 Vue.js, Preact 등 여러 프런트엔드 프레임워크가 유사한 방식의 가상 DOM 개념을 채택하고 있다. 다만 각 프레임워크마다 가상 DOM의 구현 세부 방식과 비교 알고리즘은 차이가 있다.
장점과 한계
장점으로는 복잡한 UI에서 실제 DOM 조작 횟수를 줄여 성능을 개선할 수 있고, 개발자가 상태 변화에 따른 UI 갱신을 선언적으로 작성할 수 있다는 점이 꼽힌다. 그러나 가상 DOM이 항상 실제 DOM 직접 조작보다 빠른 것은 아니며, 가상 DOM 트리 자체를 생성하고 비교하는 데에도 비용이 발생한다. 따라서 애플리케이션의 규모와 특성에 따라 가상 DOM의 이점이 달라질 수 있다는 점이 지적된다. 또한 React의 경우 가상 DOM과 함께 Fiber 아키텍처, 동시성(concurrency) 기능 등 렌더링 성능을 위한 추가적인 최적화 기법을 함께 도입하고 있다.
어원
"가상 DOM"이라는 용어는 "실제가 아닌, 메모리상에 존재하는 DOM"이라는 의미에서 유래한 것으로, 실제 DOM과 구별되는 소프트웨어적 추상화 계층을 지칭한다. 영문 명칭 Virtual DOM 역시 동일한 맥락에서 사용된다.
참고 사항
가상 DOM은 공식적인 표준이나 기관에서 정의한 표준 용어가 아니라, 프런트엔드 개발 생태계에서 통용되는 실무적·기술적 개념이다. 따라서 그 정의와 구현 방식은 프레임워크별로 다를 수 있으며, 상세한 내용은 각 프레임워크의 공식 문서를 참조하는 것이 정확하다.
