docs: finalized wiki integrity maintenance (v3.0 standard) - pruned 1400+ stubs and fixed 11k+ ghost links
This commit is contained in:
@@ -1,11 +1,11 @@
|
||||
# [[Virtual DOM]]
|
||||
# [[Virtual DOM|Virtual DOM]]
|
||||
|
||||
## 📌[[ brief]] Summary
|
||||
Virtual DOM(VDOM)은 메모리에 유지되는 가볍고 이상적인 UI의 표현(보통 React 엘리먼트 형태의 단순한 [[JavaScript]] 객체)을 의미합니다 [1-3]. React와 같은 라이브러리에 의해 실제 DOM과 동기화되며, 이 과정을 '재조정([[Reconciliation]])'이라고 부릅니다 [1-3]. 이는 개발자가 수동으로 DOM을 업데이트하고 속성을 조작하는 비효율성을 추상화하여, 선언적인 UI 개발을 가능하게 하는 핵심 프로그래밍 개념입니다 [1, 3].
|
||||
## 📌 Brief Summary
|
||||
Virtual DOM(VDOM)은 메모리에 유지되는 가볍고 이상적인 UI의 표현(보통 React 엘리먼트 형태의 단순한 [[JavaScript|JavaScript]] 객체)을 의미합니다 [1-3]. React와 같은 라이브러리에 의해 실제 DOM과 동기화되며, 이 과정을 '재조정([[Reconciliation|Reconciliation]])'이라고 부릅니다 [1-3]. 이는 개발자가 수동으로 DOM을 업데이트하고 속성을 조작하는 비효율성을 추상화하여, 선언적인 UI 개발을 가능하게 하는 핵심 프로그래밍 개념입니다 [1, 3].
|
||||
|
||||
## 📖 Core Content
|
||||
* **DOM 조작의 비효율성 해결:**
|
||||
실제 브라우저의 DOM을 직접 수정하는 작업은 본질적으로 느립니다. DOM 변경은 브라우저의 중요 렌더링 경로([[Critical Rendering Path]])에 있는 레이아웃(Reflow)과 페인트(Repaint) 단계를 반복적으로 트리거하기 때문입니다 [1]. 복잡한 애플리케이션에서 여러 노드를 개별적으로 업데이트하면 과도한 재계산이 발생하게 됩니다 [1]. Virtual DOM은 실제 DOM이 업데이트될 필요가 없는 경우를 걸러내어, 이러한 무거운 렌더링 과정을 최소화함으로써 브라우저 렌더링을 최적화합니다 [1, 4].
|
||||
실제 브라우저의 DOM을 직접 수정하는 작업은 본질적으로 느립니다. DOM 변경은 브라우저의 중요 렌더링 경로([[Critical Rendering Path|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의 범위와 구현체:**
|
||||
@@ -14,8 +14,8 @@ Virtual DOM(VDOM)은 메모리에 유지되는 가볍고 이상적인 UI의 표
|
||||
Virtual DOM은 웹 컴포넌트의 변수 및 CSS 스코핑을 위해 설계된 브라우저 기술인 Shadow DOM과 다릅니다. Virtual DOM은 브라우저 API 위에 JavaScript 라이브러리를 통해 구현된 프로그래밍 개념입니다 [9].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[Reconciliation]], [[DOM]], [[Critical Rendering Path]], Reflow / Repaint, [[Fiber Architecture]]
|
||||
- **Projects/Contexts:** [[React Performance Optimization]]
|
||||
- **Related Topics:** [[Reconciliation|Reconciliation]], DOM, Critical Rendering Path, Reflow / Repaint, [[Fiber Architecture|Fiber Architecture]]
|
||||
- **Projects/Contexts:** [[React Performance Optimization|React Performance Optimization]]
|
||||
- **Contradictions/Notes:**
|
||||
- Virtual DOM이 실제 DOM의 불필요한 업데이트를 방지하여 성능을 최적화하지만, 이전 Virtual DOM과 새로운 Virtual DOM을 비교하는 Diffing 작업 자체에 비용이 전혀 없는 것은 아닙니다 [4]. 무분별한 렌더링이 발생하면 이 비교 작업 자체가 컴퓨팅 오버헤드를 발생시킬 수 있습니다.
|
||||
- 구현상 Virtual DOM 트리는 설계적으로 불변성(immutable)을 띠도록 다루어집니다 [11].
|
||||
|
||||
Reference in New Issue
Block a user