Antigravity Agent
6.9 KiB
category, tags, title, last_updated
| category | tags | title | last_updated | ||||
|---|---|---|---|---|---|---|---|
| Unified |
|
|
2026-05-02 |
Virtual DOM
📌 Brief Summary
Virtual DOM(VDOM)은 메모리에 유지되는 가볍고 이상적인 UI의 표현(보통 React 엘리먼트 형태의 단순한 JavaScript 객체)을 의미합니다 [1-3]. React와 같은 라이브러리에 의해 실제 DOM과 동기화되며, 이 과정을 '재조정(Reconciliation)'이라고 부릅니다 [1-3]. 이는 개발자가 수동으로 DOM을 업데이트하고 속성을 조작하는 비효율성을 추상화하여, 선언적인 UI 개발을 가능하게 하는 핵심 프로그래밍 개념입니다 [1, 3].
실제 DOM을 매번 직접 조작하는 대신, 메모리 상에 UI의 가상 표현을 구축한 뒤 이전 상태와 비교(Diffing)하여 실제 변경이 필요한 최소한의 부분만 DOM에 반영함으로써 렌더링 성능을 최적화하는 React의 핵심 아키텍처입니다.
📖 Core Content
- DOM 조작의 비효율성 해결: 실제 브라우저의 DOM을 직접 수정하는 작업은 본질적으로 느립니다. DOM 변경은 브라우저의 중요 렌더링 경로(Critical Rendering Path)에 있는 레이아웃(Reflow)과 페인트(Repaint) 단계를 반복적으로 트리거하기 때문입니다 [1]. 복잡한 애플리케이션에서 여러 노드를 개별적으로 업데이트하면 과도한 재계산이 발생하게 됩니다 [1]. Virtual DOM은 실제 DOM이 업데이트될 필요가 없는 경우를 걸러내어, 이러한 무거운 렌더링 과정을 최소화함으로써 브라우저 렌더링을 최적화합니다 [1, 4].
- 재조정(Reconciliation)과 Diffing 알고리즘:
상태가 변경되면 React는 메모리상에서 이전 버전의 Virtual DOM과 새로운 Virtual DOM을 비교(diff)하여 변경 사항을 감지합니다 [2, 5]. 두 트리를 비교하는 일반적인 알고리즘은 $O(n^3)$의 복잡도를 가지지만, React는 엘리먼트의 타입이 다르면 트리를 새로 구축하고 자식 요소들은
key속성을 통해 식별한다는 두 가지 가정을 기반으로O(n)복잡도의 휴리스틱(heuristic) 알고리즘을 사용합니다 [6-8]. 이를 통해 실제 DOM을 업데이트하는 데 필요한 최소한의 연산만 수행합니다 [1]. - Virtual DOM의 범위와 구현체: React 세계에서 Virtual DOM은 주로 UI를 나타내는 'React 엘리먼트' 객체를 지칭하지만, React 16부터 도입된 새로운 재조정 엔진이자 컴포넌트 트리에 대한 추가 정보를 담고 있는 내부 객체인 '파이버(Fiber)' 역시 Virtual DOM 구현의 일부로 간주됩니다 [9, 10].
- Shadow DOM과의 차이점: Virtual DOM은 웹 컴포넌트의 변수 및 CSS 스코핑을 위해 설계된 브라우저 기술인 Shadow DOM과 다릅니다. Virtual DOM은 브라우저 API 위에 JavaScript 라이브러리를 통해 구현된 프로그래밍 개념입니다 [9].
1. 가상 DOM의 작동 원리 (디핑 알고리즘) React는 렌더링 시 실제 DOM을 직접 조작하지 않고, UI가 어떻게 보여야 하는지에 대한 가상 트리(Virtual Tree)를 메모리에 구축합니다. 애플리케이션의 상태가 변경되면 새로운 가상 DOM을 생성하고, 이를 실제 DOM의 복사본 역할을 하는 이전 가상 DOM과 비교합니다. 이 비교 과정을 통해 두 트리 간의 차이점을 찾아내고, 오직 변경이 발생한 노드나 속성만을 실제 DOM에 업데이트하여 연산 과정을 더 빠르고 효율적으로 만듭니다.
2. 렌더 단계(Render Phase)와 커밋 단계(Commit Phase) 가상 DOM을 활용한 업데이트는 명확히 두 단계로 나뉘어 실행됩니다.
- 렌더 단계: React가 컴포넌트를 호출하여 새로운 가상 트리를 구축하는 과정입니다.
- 커밋 단계: 계산된 최소한의 변경 사항들을 실제 DOM에 적용하는 과정입니다.
3. 실제 DOM 조작 비용의 최소화 기본적으로 브라우저에서 실제 DOM을 조작하고 레이아웃을 다시 계산하는 작업은 매우 무겁고 비용이 많이 듭니다. 가상 DOM은 이러한 값비싼 DOM 조작 횟수를 최소화하여 성능을 크게 높여줍니다.
4. 가상 DOM 연산의 한계와 주의점 가상 DOM이 실제 DOM 조작 비용을 줄여주지만, 가상 DOM을 업데이트하는 연산 자체도 비용이 듭니다. 컴포넌트 트리가 너무 깊게 중첩되어 있거나, 무의미한 상태 변화로 인해 너무 많은 컴포넌트가 불필요하게 리렌더링될 경우 가상 DOM 트리 생성 및 비교 과정에서 성능 병목이 발생할 수 있습니다.
⚖️ Trade-offs & Caveats
- 과거 데이터와의 충돌: 자동화 엔진에 의해 매핑된 지식으로, 추후 정밀 검증 필요.
- 정책 변화: Design & Experience 분야의 자동 자산화 수행.
🔗 Knowledge Connections
- Related Topics: Reconciliation, DOM, Critical Rendering Path, Reflow / Repaint, Fiber Architecture
- Projects/Contexts: React Performance Optimization
- Contradictions/Notes:
- Virtual DOM이 실제 DOM의 불필요한 업데이트를 방지하여 성능을 최적화하지만, 이전 Virtual DOM과 새로운 Virtual DOM을 비교하는 Diffing 작업 자체에 비용이 전혀 없는 것은 아닙니다 [4]. 무분별한 렌더링이 발생하면 이 비교 작업 자체가 컴퓨팅 오버헤드를 발생시킬 수 있습니다.
- 구현상 Virtual DOM 트리는 설계적으로 불변성(immutable)을 띠도록 다루어집니다 [11].
Last updated: 2026-04-25
- Related Topics: 재조정 (Reconciliation), React Performance Optimization, 불필요한 리렌더링 방지
- Projects/Contexts: 대규모 데이터 렌더링 및 가상화 최적화, 고성능 실시간 상호작용 시스템을 위한 React 기반 게임 엔진 아키텍처
- Contradictions/Notes: 가상 DOM과 재조정 알고리즘은 일반적인 웹 애플리케이션의 선언적 UI 관리에는 압도적으로 훌륭하지만, 매 프레임 수만 개의 속성이 변해야 하는 3D 게임이나 무거운 애니메이션 환경에서는 오히려 가상 DOM을 비교하는
O(n)연산 자체가 프레임 저하(Lag)를 유발하는 치명적인 원인이 됩니다. 이러한 특수 환경에서는 가상 DOM을 우회하여 참조(ref)를 통한 **명령형 직접 조작(Imperative Manipulation)**을 사용해야만 60FPS를 달성할 수 있습니다.
Last updated: 2026-04-15