2nd/10_Wiki/Topics/Architecture/React Fiber Architecture.md

React Fiber Architecture

📌 Brief Summary

React Fiber는 동시성 렌더링(Concurrent Rendering)을 지원하기 위해 React 16에 도입된 재조정(Reconciliation) 엔진의 전면적인 재작성 아키텍처입니다 [1, 2]. 기존의 동기식 "스택 재조정자(stack reconciler)"가 가지던 메인 스레드 차단 문제를 해결하기 위해 렌더링 작업을 "Fiber 노드"라는 작은 작업 단위로 분할합니다 [3, 4]. 이를 통해 렌더링을 일시 중지하고 높은 우선순위의 상호작용에 제어권을 양보한 뒤 다시 재개하는 "타임 슬라이싱(Time-Slicing)"과 우선순위 기반의 렌더링이 가능해집니다 [3, 4].

📖 Core Content

• 동기식 블로킹의 해결 및 단위 작업 (Unit of Work) Fiber 이전의 React는 "스택 재조정자"를 사용하여 컴포넌트 트리를 단일 재귀 호출로 처리했기 때문에, 작업이 16.6ms의 프레임 예산을 초과하면 메인 스레드를 차단하고 UI가 사용자 입력에 응답하지 못하게 만들었습니다 [3]. Fiber는 렌더링 작업을 '단위 작업(unit of work)'인 Fiber 노드로 쪼개어 작업 루프(work loop)에서 점진적으로 처리합니다 [4, 5]. 각 단위 작업을 마친 후에는 브라우저에 제어권을 양보할지 계속 진행할지 확인하며, beginWork와 completeWork 함수를 통해 노드를 순회하고 처리합니다 [5, 6].

• 재조정 단계 (Reconciliation Phases) Fiber의 재조정 과정은 중단 가능성과 우선순위 관리를 위해 두 가지 명확한 단계로 나뉩니다 [7].

  • 렌더 단계 (Render Phase): 이 단계는 중단하거나 폐기하고 다시 시작할 수 있습니다 [7, 8]. DOM을 직접 변경하지 않고 순수한 계산만 수행하며, 이전 상태와 새로운 상태의 차이를 계산해 업데이트나 삽입, 삭제 등의 이펙트 태그(effect tags)를 Fiber 노드에 표시합니다 [7-9].
  • 커밋 단계 (Commit Phase): 동기적이며 중단할 수 없는 단계입니다 [8, 10]. 렌더 단계에서 구성된 이펙트 목록을 바탕으로 모든 DOM의 변이(mutation)를 한 번에 적용하며, 레이아웃 이펙트와 패시브 이펙트(useEffect 등)를 실행합니다 [8, 10].

• 우선순위 기반 스케줄링 및 레인(Lane) 모델 React Scheduler는 "Lanes"라는 우선순위 시스템을 통해 작업을 관리합니다 [3, 9].

  • 사용자 클릭이나 타이핑과 같은 긴급한 상호작용은 Sync Lane(즉시 처리)에 할당되고, 데이터 페칭은 Default Lane, 화면 밖 렌더링은 Idle Lane으로 분류됩니다 [11, 12].
  • 레인 모델은 32비트 정수를 활용한 비트마스크 시스템을 사용하여 우선순위의 중복 여부를 효율적으로 확인하고, 낮은 우선순위 작업의 기아 현상(starvation)을 방지하며 업데이트를 하나로 묶습니다 [13, 14]. 이 모델 덕분에 [[useTransition|useTransition]]이나 [[useDeferredValue|useDeferredValue]]와 같은 동시성 기능이 가능해집니다 [15].

• 이펙트 목록 (Effect List) 및 작업 중인 파이버 (WIP) 관리 렌더 단계에서 React는 사이드 이펙트를 가진 Fiber들의 선형 목록인 이펙트 목록(Effect List)을 구축합니다 [16]. 커밋 단계에서는 전체 트리를 다시 탐색하는 대신 이 이펙트 목록만 순회하므로 업데이트가 훨씬 빨라집니다 [16]. 또한, 런타임 조건 및 우선순위에 따라 작업 중인(Work-In-Progress, WIP) Fiber를 일시 중지, 재개, 폐기 또는 재생성하며 UI의 부드러운 반응성을 유지합니다 [17].

🔗 Knowledge Connections

• Related Topics: Concurrent Rendering, Reconciliation, Virtual DOM, Time-Slicing, Lane Model
• Projects/Contexts: React 16, React Scheduler
• Contradictions/Notes: 소스 문서들은 공통적으로 React Fiber가 기존 동기식 렌더링의 한계를 극복하기 위한 비동기적이며 중단 가능한 아키텍처임을 강조합니다. 또한, React 19의 useTransition 및 useDeferredValue와 같은 최신 동시성 기능이 모두 Fiber의 Lane 모델 아키텍처 위에서 구현되었음을 뒷받침하고 있습니다 [15, 18, 19].

---

Last updated: 2026-04-25