Antigravity Agent
4.7 KiB
React 16+ Core Engine
📌 Brief Summary
React 16+ 핵심 엔진인 파이버(Fiber) 아키텍처는 동시성 렌더링(Concurrent Rendering)을 지원하기 위해 완전히 재작성된 React의 재조정(Reconciliation) 알고리즘입니다 [1, 2]. 과거 동기적으로 전체 컴포넌트 트리를 한 번에 처리하여 메인 스레드를 차단하던 방식에서 벗어나, 렌더링 작업을 '파이버 노드(Fiber node)'라는 작은 단위로 나누어 점진적으로 처리합니다 [1-3]. 이 구조는 시간 분할(Time-Slicing) 및 레인(Lane) 모델을 통한 작업 우선순위 지정 기능을 제공하여, 무거운 렌더링 중에도 긴급한 사용자 입력 처리가 지연되지 않도록 UI 반응성을 보장합니다 [2-6].
📖 Core Content
가상 DOM과 파이버 데이터 구조 기존 React의 가상 DOM은 불변성(Immutable)을 띠는 구조였으나, 단일 자식 노드를 여러 곳에서 공유할 때의 참조 문제 등을 해결하기 위해 React 16+ 엔진은 변경 가능한 '증강 DOM(Augmented DOM)' 형태인 파이버(Fiber) 데이터 구조를 사용합니다 [7]. 파이버 트리를 구성하는 각 컴포넌트(파이버 노드)는 컴포넌트의 타입, 상태, 속성(props)은 물론 부모, 자식, 형제 노드를 가리키는 포인터를 포함합니다 [8, 9].
작업 루프(Work Loop)와 스케줄러 메커니즘 파이버 재조정 엔진은 작업 루프를 통해 한 번에 하나의 파이버 노드를 처리합니다 [2]. 스케줄러는 레인 모델에 따른 우선순위와 남은 프레임 시간을 기준으로 다음 처리할 작업 단위를 선택합니다 [10, 11]. 하나의 작업 단위를 마칠 때마다 브라우저에 제어권을 양보(Yield)해야 할 긴급한 작업(사용자 입력 등)이 있는지 확인하여 처리 순서를 유연하게 조정합니다 [10, 11]. 진행 중이던 작업(WIP, Work-in-Progress)은 우선순위에 따라 일시 중지(Pause), 재개(Resume), 폐기(Discard), 또는 재생성될 수 있습니다 [12].
재조정(Reconciliation)의 2단계 분리 파이버 아키텍처는 렌더링 작업의 중단 및 우선순위 처리를 가능하게 하려고 전체 과정을 두 가지 명확한 단계로 분리했습니다 [13].
- 렌더링 단계 (Render Phase): 이 단계는 비동기적이며 중단되거나 재시작될 수 있는 순수 연산 과정입니다 [13, 14]. 파이버 트리를 순회하면서 이전 상태와 새로운 상태의 차이를 계산하고(Diffing), 노드 삽입, 업데이트, 삭제와 같은 이펙트(Effect) 태그를 할당하여 변경이 필요한 파이버들만 모은 '이펙트 리스트'를 선형적으로 구축합니다 [5, 13-15]. 이 단계에서는 실제 DOM을 직접 수정하지 않습니다 [13, 14].
- 커밋 단계 (Commit Phase): 렌더링 단계와 달리 동기식으로 진행되며 절대 중단될 수 없습니다 [14, 16, 17]. 렌더링 단계에서 생성된 이펙트 리스트를 바탕으로 실제 DOM 변이(삽입, 삭제, 업데이트)를 한 번에 적용합니다 [14-16]. DOM이 변경된 직후,
useLayoutEffect가 동기적으로 실행되고 이후 화면이 그려진(Paint) 뒤 비동기적으로useEffect가 실행됩니다 [14, 16-18].
우선순위 관리와 레인(Lane) 모델 복잡한 업데이트들의 우선순위를 정교하게 다루기 위해 React는 32비트 정수 비트마스크 시스템인 '레인(Lane) 모델'을 채택했습니다 [5, 6, 19]. 이 시스템은 사용자 클릭/타이핑과 같은 '동기적(Sync) 레인', 스크롤 같은 '연속적(InputContinuous) 레인', 데이터 페칭 등의 '기본(Default) 레인', 그리고 '유휴(Idle) 레인' 등으로 작업의 중요도를 세분화합니다 [4, 20]. 레인 모델의 비트 연산을 통해 렌더러는 여러 우선순위가 겹치는 상황에서도 가장 중요한 작업을 먼저 화면에 반영할 수 있도록 제어합니다 [6, 18, 19].
🔗 Knowledge Connections
- Related Topics: Virtual DOM, Reconciliation, Concurrent Rendering, Lane Model, Time Slicing
- Projects/Contexts: React 18 Automatic Batching, React Server Components (RSC
- Contradictions/Notes: 렌더링 단계(Render Phase)는 높은 우선순위 작업이 들어올 경우 언제든 중단되거나 재시작될 수 있으므로 이 단계의 내부 연산에는 절대 사이드 이펙트(DOM 조작 등)가 포함되어서는 안 되며, 부수 효과 처리는 반드시 동기적으로 보장되는 커밋 단계(Commit Phase)에 배치되어야 합니다 [13, 14, 16, 17].
Last updated: 2026-04-25