Antigravity Agent
13 KiB
category, tags, title, last_updated
| category | tags | title | last_updated | ||||
|---|---|---|---|---|---|---|---|
| Unified |
|
|
2026-05-02 |
React Fiber 및 동시성 렌더링
📌 Brief Summary
React Fiber는 동기식 렌더링의 한계를 극복하고 동시성 렌더링(Concurrent Rendering)을 지원하기 위해 도입된 React의 재조정(Reconciliation) 엔진 아키텍처이다 [1, 2]. 전체 컴포넌트 트리를 단일 호출로 처리하던 기존 방식과 달리, 렌더링 작업을 '파이버 노드(Fiber node)'라는 작은 단위로 쪼개어 스케줄링한다 [3, 4]. 이를 통해 메인 스레드를 차단하지 않고 렌더링을 일시 정지하거나 재개할 수 있으며, 타자 입력이나 클릭과 같은 긴급한 업데이트를 우선적으로 처리하여 반응성 높은 UI를 제공할 수 있다 [3, 5, 6].
React Fiber는 React 16에서 도입된 조정(Reconciliation) 엔진의 완전한 재작성 버전으로, 동시성 렌더링(Concurrent Rendering)을 지원하기 위해 설계되었습니다 [1, 2]. 기존의 동기식 '스택 조정자(stack reconciler)'가 렌더링 중 메인 스레드를 차단하던 문제를 해결하기 위해, 렌더링 작업을 'Fiber 노드'라는 작은 작업 단위(units of work)로 분할하여 다수의 프레임에 걸쳐 처리합니다 [2, 3]. 이를 통해 우선순위에 따라 렌더링 작업을 일시 중지, 중단, 또는 재개할 수 있는 세밀한 제어와 타임 슬라이싱(Time-Slicing) 기능을 제공하여 UI의 응답성을 극대화합니다 [3-5].
React Fiber는 React 16에서 도입된 새로운 재조정(Reconciliation) 엔진이자 아키텍처로, 동시성 렌더링(Concurrent Rendering)을 지원하기 위해 개발되었습니다 [1, 2]. 기존의 동기적이고 중단 불가능한 렌더링 방식의 한계를 극복하기 위해 렌더링 작업을 '작은 작업 단위(Fiber node)'로 분할하여 처리합니다 [1, 3, 4]. 이를 통해 메인 스레드를 차단하지 않고 작업의 우선순위를 유연하게 관리하며 렌더링을 일시 중지하거나 재개할 수 있어, 사용자 상호작용에 빠르고 부드럽게 반응하는 UI를 구축할 수 있습니다 [3, 5, 6].
📖 Core Content
도입 배경 및 문제점 해결 Fiber 아키텍처 이전의 React는 '스택 재조정자(Stack reconciler)'를 사용하여 전체 컴포넌트 트리를 한 번의 재귀 호출로 처리했다 [3]. 대규모 애플리케이션의 경우 이러한 방식은 메인 스레드를 16.6ms 이상 차단하여 UI의 애니메이션이나 사용자 입력 반응을 지연시키는 문제를 발생시켰다 [3]. React 16부터 도입된 Fiber는 렌더링을 완전히 재작성하여, 작업을 더 작은 청크로 나누고 여러 프레임에 걸쳐 분산할 수 있도록 설계되었다 [1, 4].
작업 루프(Work Loop)와 렌더링의 두 단계 React Fiber는 작업 루프를 통해 렌더링 단위를 점진적으로 처리하며, 전체 과정은 두 가지 주요 단계로 나뉜다 [4, 7].
- 렌더 단계(Render Phase): 이 단계는 중단할 수 있으며(Interruptible), DOM 변경 없이 순수한 연산만 수행된다 [7]. React는 Fiber 트리를 순회하면서(
beginWork,completeWork) 이전 상태와 새로운 상태를 비교한다 [7, 8]. 이때, 메인 스레드가 바쁘거나 우선순위가 높은 상호작용이 들어오면 작업을 일시 정지, 재개 또는 폐기(WIP, Work-In-Progress 관리)할 수 있다 [9]. 변경이 필요한 노드에는 이펙트 태그(Placement, Update, Deletion 등)가 지정되며 이펙트 목록(Effect list)이 만들어진다 [7, 10, 11]. - 커밋 단계(Commit Phase): 이 단계는 동기적이고 중단 불가능(Uninterruptible)하다 [12]. 렌더 단계에서 생성된 이펙트 목록을 바탕으로 실제 DOM 변형이 이루어진다 [10, 12]. 이 단계는 DOM 변형 전(Before Mutation), 변형(Mutation), 레이아웃 이펙트(
useLayoutEffect실행), 패시브 이펙트(useEffect실행) 순으로 처리된다 [13].
우선순위 스케줄링과 차선(Lane) 모델 Fiber는 '차선(Lanes)'이라고 불리는 비트마스크(Bitmask) 기반의 우선순위 시스템을 사용하여 동시성 작업을 관리한다 [11, 14].
- 우선순위 레벨: 클릭이나 타이핑 등 즉각 반응이 필요한 작업은 Sync 레벨, 스크롤이나 호버는 InputContinuous, 네트워크 응답 등은 Default, 오프스크린 렌더링은 Idle 레벨로 구분된다 [5, 15].
- 이를 통해 낮은 우선순위의 작업을 처리하는 중에도 우선순위가 높은 상호작용이 들어오면 실행 중인 작업을 멈추고 중요한 작업을 먼저 렌더링하게 된다 [6].
React 18 이후의 동시성 기능 활용 이러한 아키텍처를 기반으로 React 18 및 19에서는 개발자가 렌더링 우선순위를 직접 조정할 수 있는 동시성 훅을 제공한다.
[[useTransition|useTransition]]: 특정 상태 업데이트를 낮은 우선순위로 지정하여, 무거운 필터링 작업이 진행되는 동안에도 타이핑 등의 긴급한 입력이 지연되지 않도록 한다 [16, 17].[[useDeferredValue|useDeferredValue]]: 외부에서 전달받은 값의 소비를 지연시켜 무거운 렌더링 중에 UI가 동결되는 것을 막는다 [17, 18].- 또한 동시성 렌더링은 클라이언트의 Hydration 과정에서도 메인 스레드를 심하게 막지 않고 작은 청크로 쪼개어 렌더링할 수 있도록 돕는다 [19].
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].
-
파이버 노드(Fiber Node)와 작업 루프(Work Loop): React는 컴포넌트 트리의 각 요소를 파이버 노드로 표현하며, 이는 곧 수행해야 할 개별 '작업 단위(Unit of Work)'가 됩니다 [4, 7]. 파이버 재조정자는 이 작업 단위들을 순차적으로 처리하는 작업 루프를 통해 작동합니다 [4, 8]. 하나의 작업을 처리한 후 남은 프레임 시간을 확인하여, 시간이 부족하거나 고우선순위 작업(예: 사용자 입력)이 대기 중일 경우 브라우저에 제어권을 양보(yield)하여 UI가 멈추는 것을 방지합니다 [5, 9].
-
두 가지 렌더링 단계(Reconciliation Phases): React의 재조정 과정은 작업의 중단 및 우선순위 지정을 가능하게 하기 위해 두 가지 페이즈로 나뉩니다 [10].
- 렌더 페이즈(Render Phase): 중단, 취소, 재개가 가능한 비동기적 단계입니다 [10, 11]. 기존 상태와 새로운 상태의 차이를 계산하고 부수 효과(Effect)를 가진 파이버 노드들의 목록을 구성하지만, 이 단계에서는 실제 DOM을 변경하지 않습니다 [10, 11].
- 커밋 페이즈(Commit Phase): 동기적이고 중단할 수 없는 단계입니다 [11, 12]. 렌더 페이즈에서 도출된 모든 DOM 조작(삽입, 삭제, 업데이트 등)을 실제 DOM에 한 번에 반영합니다 [12, 13].
-
시간 분할(Time-Slicing)과 레인(Lane) 기반 우선순위 모델:
- 파이버는 시간 분할 기능을 활성화하여 무거운 렌더링 작업을 작은 덩어리로 쪼개고, 렌더링 중간에 브라우저가 다른 중요한 작업을 처리할 수 있게 합니다 [3, 6, 9].
- 작업의 우선순위를 32비트 정수를 활용한 '레인(Lane)' 모델로 체계적으로 관리합니다 [14, 15]. 타이핑이나 클릭 같은 사용자 입력은 즉시(Sync) 처리되는 가장 높은 우선순위를 갖고, 데이터 페칭 결과나 화면 밖의 렌더링은 상대적으로 낮은 우선순위(Default, Idle)를 갖게 됩니다 [14, 16].
- 이러한 우선순위 분배를 통해
[[useTransition|useTransition]]이나[[useDeferredValue|useDeferredValue]]같은 동시성 렌더링 훅이 UI의 반응성을 유지하면서 무거운 연산을 지연시킬 수 있도록 지원합니다 [17].
-
WIP(Work-In-Progress) 트리 관리: React는 현재 진행 중인 렌더링 작업(WIP)을 조건에 따라 일시 중지(Pause), 재개(Resume), 혹은 폐기(Discard)할 수 있습니다 [18]. 메인 스레드가 바쁘거나 더 높은 우선순위의 업데이트가 들어오면 현재 작업을 멈추어 두었다가, 유휴 시간이 생기면 다시 재개하여 컴퓨팅 자원을 효율적으로 사용합니다 [18].
⚖️ Trade-offs & Caveats
No trade-offs available.
🔗 Knowledge Connections
- Related Topics: Reconciliation, Virtual DOM, Time-Slicing, Hydration
- Projects/Contexts: React 18 Concurrent Features, useTransition 및 useDeferredValue
- Contradictions/Notes: 제공된 소스 전반에 걸쳐 Fiber 아키텍처와 동시성 렌더링의 매커니즘, 장점에 대해 일관된 설명을 제공하고 있으며, 상충되는 의견은 존재하지 않습니다.
Last updated: 2026-04-25
- Related Topics: Concurrent Rendering, Reconciliation, Virtual DOM
- Projects/Contexts: React 16, Time-Slicing
- Contradictions/Notes: 소스에 관련 정보가 부족합니다.
Last updated: 2026-04-25
- Related Topics: Concurrent Rendering, Reconciliation, Virtual DOM, Critical Rendering Path
- Projects/Contexts: 브라우저 렌더링 과정 최적화 및 UI 반응성 개선
- Contradictions/Notes: React Fiber 아키텍처 이전의 React는 "스택 재조정자(Stack Reconciler)"를 사용하여 컴포넌트 트리를 단일 재귀 호출로 처리했기 때문에, 애플리케이션의 크기가 커질 경우 메인 스레드가 차단(Blocking)되어 사용자 입력이나 애니메이션이 끊기는 고질적인 문제가 존재했습니다. Fiber는 이를 작업 단위 분할로 해결했습니다 [1, 3].
Last updated: 2026-04-25