bluemsi/2nd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: finalized wiki integrity maintenance (v3.0 standard) - pruned 1400+ stubs and fixed 11k+ ghost links

Browse Source
This commit is contained in:
Antigravity Agent
2026-05-02 09:18:34 +09:00
parent c84dcb8371
commit 6445fcc05b
13150 changed files with 55394 additions and 100862 deletions
Download Patch File Download Diff File Expand all files Collapse all files
10_Wiki/Topics/Frontend_Mastery/가상 DOM (Virtual DOM) 및 Fiber.md
+5 -5
View File
@@ -1,7 +1,7 @@
# [[가상 DOM ([[Virtual DOM]]) 및 Fiber]]
# [[가상 DOM (Virtual DOM) 및 Fiber|가상 DOM (Virtual DOM) 및 Fiber]]
## 📌[[ brief]] Summary
가상 DOM(Virtual DOM)은 사용자 인터페이스(UI)의 이상적인 상태를 메모리에 저장하고 가볍게 표현한 자바스크립트 객체로, 실제 DOM과의 동기화(재조정, [[Reconciliation]])를 통해 직접적인 DOM 조작의 비효율성을 추상화하는 개념입니다 [1-3]. [[React Fiber]]는 이러한 재조정 엔진을 완전히 재작성하여 React 16에 도입된 아키텍처로, 동기식 렌더링의 한계를 극복하고 렌더링 작업을 중단 및 재개할 수 있는 동시성 렌더링([[Concurrent Rendering]])을 지원합니다 [4, 5]. Fiber 아키텍처는 렌더링 작업을 '작업 단위(Fiber node)'로 분할하여 우선순위에 따라 스케줄링함으로써 애플리케이션의 반응성을 극대화합니다 [6-8].
## 📌 Brief Summary
가상 DOM(Virtual DOM)은 사용자 인터페이스(UI)의 이상적인 상태를 메모리에 저장하고 가볍게 표현한 자바스크립트 객체로, 실제 DOM과의 동기화(재조정, [[Reconciliation|Reconciliation]])를 통해 직접적인 DOM 조작의 비효율성을 추상화하는 개념입니다 [1-3]. React Fiber는 이러한 재조정 엔진을 완전히 재작성하여 React 16에 도입된 아키텍처로, 동기식 렌더링의 한계를 극복하고 렌더링 작업을 중단 및 재개할 수 있는 동시성 렌더링([[Concurrent Rendering|Concurrent Rendering]])을 지원합니다 [4, 5]. Fiber 아키텍처는 렌더링 작업을 '작업 단위(Fiber node)'로 분할하여 우선순위에 따라 스케줄링함으로써 애플리케이션의 반응성을 극대화합니다 [6-8].
## 📖 Core Content
* **가상 DOM과 휴리스틱 재조정 알고리즘**
@@ -19,8 +19,8 @@
React의 스케줄러는 비트마스크(Bitmask) 시스템을 사용하는 'Lane 모델'을 통해 동시성 작업을 관리합니다 [18, 19]. 업데이트의 성격에 따라 Sync Lane(사용자 타이핑, 클릭 등 즉시 처리), InputContinuous Lane(스크롤 등), Default Lane, Idle Lane(백그라운드 작업) 등으로 우선순위를 분류합니다 [20, 21]. 이를 통해 무거운 연산이 진행 중이더라도 메인 스레드를 차단하지 않고 긴급한 사용자 상호작용에 즉각적으로 반응할 수 있습니다 [20, 22].
## 🔗 Knowledge Connections
- **Related Topics:** [[재조정 (Reconciliation)]], [[동시성 렌더링 (Concurrent Rendering)]], [[Critical Rendering Path (CRP)]], 레이아웃 스래싱 ([[Layout Thrashing]])
- **Projects/Contexts:** React 16, [[React 18 Concurrent Features]] ([[useTransition]], [[useDeferredValue]])
- **Related Topics:** [[재조정 (Reconciliation)|재조정 (Reconciliation]], 동시성 렌더링 (Concurrent Rendering), Critical Rendering Path (CRP), 레이아웃 스래싱 ([[Layout Thrashing|Layout Thrashing]])
- **Projects/Contexts:** React 16, [[React 18 Concurrent Features|React 18 Concurrent Features]] (useTransition, [[useDeferredValue|useDeferredValue]])
- **Contradictions/Notes:** 가상 DOM 트리는 설계상 불변(Immutable)으로 취급되지만, React 내부적으로는 현재 설치된 상태(설치된 DOM 노드에 대한 참조 등)를 추적하기 위해 변경 가능한(Mutable) "증강된 DOM(Augmented DOM)" 형태인 Fiber 데이터 구조를 사용합니다 [12].
---