Antigravity Agent
4.1 KiB
React Fiber 아키텍처
📌 Brief Summary
React Fiber는 React 16에서 도입된 조정(Reconciliation) 엔진의 완전한 재작성 버전으로, 동시성 렌더링(Concurrent Rendering)을 지원하기 위해 설계되었습니다 [1, 2]. 기존의 동기식 '스택 조정자(stack reconciler)'가 렌더링 중 메인 스레드를 차단하던 문제를 해결하기 위해, 렌더링 작업을 'Fiber 노드'라는 작은 작업 단위(units of work)로 분할하여 다수의 프레임에 걸쳐 처리합니다 [2, 3]. 이를 통해 우선순위에 따라 렌더링 작업을 일시 중지, 중단, 또는 재개할 수 있는 세밀한 제어와 타임 슬라이싱(Time-Slicing) 기능을 제공하여 UI의 응답성을 극대화합니다 [3-5].
📖 Core Content
Fiber 노드와 작업 루프 (Work Loop)
React의 각 컴포넌트는 Fiber 노드로 표현되며, 해당 컴포넌트의 타입, 상태(State), 속성(props)뿐만 아니라 부모(return), 자식(child), 형제(sibling) 관계를 나타내는 포인터를 포함합니다 [6-8]. Fiber 아키텍처의 중심에는 작업 루프가 존재하며, 스케줄러를 통해 우선순위와 가용 시간에 따라 다음 작업 단위를 선택하여 순차적으로 처리합니다 [2, 9]. 작업을 수행(beginWork, completeWork)한 후에는 더 높은 우선순위의 작업(예: 사용자 입력)을 처리하기 위해 브라우저에 제어권을 넘겨야 하는지(yield)를 지속적으로 확인합니다 [6, 9, 10].
두 단계의 렌더링 프로세스 (Reconciliation Phases) Fiber의 조정 과정은 작업을 중단하고 우선순위를 매기기 위해 두 가지 구별된 단계로 나뉩니다 [4].
- 렌더 단계 (Render Phase): 이 단계는 중단 가능(interruptible)하며, 브라우저의 DOM을 직접 변경하지 않고 메모리 내의 Fiber 트리를 순회하여 순수 계산만을 수행합니다 [4, 11]. 이전 상태와 새로운 상태를 비교하여 DOM 삽입, 삭제, 업데이트 등의 부작용(side effects)이 필요한 노드들을 파악하고, 이를 모아 최적화된 '이펙트 리스트(Effect list)'를 구축합니다 [4, 12, 13]. 더 높은 우선순위 작업이 들어오면 기존 작업을 일시 중지하고, 진행 중이던 작업(WIP, Work-In-Progress)을 저장하거나 폐기 및 재시작할 수 있습니다 [11, 14].
- 커밋 단계 (Commit Phase): 이 단계는 동기적으로 실행되며 중단할 수 없습니다(uninterruptible) [11, 15]. 렌더 단계에서 생성된 이펙트 리스트만을 순회하며 모든 변경 사항을 실제 DOM에 한 번에 적용합니다 [12, 15]. 이 과정에서
useLayoutEffect와 같은 동기적 레이아웃 효과와 비동기적인useEffect가 함께 실행됩니다 [11, 15, 16].
우선순위와 레인 모델 (Priority Levels and Lane Model) Fiber는 여러 동시 작업을 관리하기 위해 32비트 정수 비트마스크를 활용한 '레인(Lane)'이라는 정교한 우선순위 모델을 사용합니다 [13, 17]. 타이핑이나 클릭과 같은 이산적인 사용자 입력은 즉시 처리되어야 하는 가장 높은 우선순위(Sync Lane)를 부여받고, 스크롤이나 호버 등의 연속적 입력은 그 다음 높은 우선순위를 갖습니다 [18, 19]. 반면 화면에 보이지 않는 오프스크린 렌더링이나 데이터 로깅 작업은 유휴(Idle) 상태에 처리되도록 낮은 우선순위가 할당됩니다 [18, 19]. 이 모델을 통해 React는 여러 우선순위가 섞인 업데이트를 효율적으로 관리하고, 지연된 작업이 영원히 실행되지 않는 기아 상태(starvation)를 방지하며 항상 쾌적한 반응성을 유지할 수 있습니다 [17, 20].
🔗 Knowledge Connections
- Related Topics: Concurrent Rendering, Reconciliation, Virtual DOM
- Projects/Contexts: React 16, Time-Slicing
- Contradictions/Notes: 소스에 관련 정보가 부족합니다.
Last updated: 2026-04-25