Antigravity Agent
100 lines
13 KiB
Markdown
100 lines
13 KiB
Markdown
---
|
|
category: Unified
|
|
tags: [auto-consolidated, technical-documentation]
|
|
title: [[React Fiber 및 동시성 렌더링|React Fiber 및 동시성 렌더링]]
|
|
last_updated: 2026-05-02
|
|
---
|
|
|
|
# [[React Fiber 및 동시성 렌더링|React Fiber 및 동시성 렌더링]]
|
|
|
|
## 📌 Brief Summary
|
|
[[React Fiber|React Fiber]]는 동기식 렌더링의 한계를 극복하고 동시성 렌더링(Concurrent Rendering)을 지원하기 위해 도입된 React의 재조정([[Reconciliation|Reconciliation]]) 엔진 아키텍처이다 [1, 2]. 전체 컴포넌트 트리를 단일 호출로 처리하던 기존 방식과 달리, 렌더링 작업을 '파이버 노드(Fiber node)'라는 작은 단위로 쪼개어 스케줄링한다 [3, 4]. 이를 통해 메인 스레드를 차단하지 않고 렌더링을 일시 정지하거나 재개할 수 있으며, 타자 입력이나 클릭과 같은 긴급한 업데이트를 우선적으로 처리하여 반응성 높은 UI를 제공할 수 있다 [3, 5, 6].
|
|
|
|
---
|
|
|
|
[[React Fiber|React Fiber]]는 React 16에서 도입된 조정(Reconciliation) 엔진의 완전한 재작성 버전으로, 동시성 렌더링(Concurrent Rendering)을 지원하기 위해 설계되었습니다 [1, 2]. 기존의 동기식 '스택 조정자(stack reconciler)'가 렌더링 중 메인 스레드를 차단하던 문제를 해결하기 위해, 렌더링 작업을 'Fiber 노드'라는 작은 작업 단위(units of work)로 분할하여 다수의 프레임에 걸쳐 처리합니다 [2, 3]. 이를 통해 우선순위에 따라 렌더링 작업을 일시 중지, 중단, 또는 재개할 수 있는 세밀한 제어와 타임 슬라이싱([[Time-Slicing|Time-Slicing]]) 기능을 제공하여 UI의 응답성을 극대화합니다 [3-5].
|
|
|
|
---
|
|
|
|
React Fiber는 React 16에서 도입된 새로운 재조정([[Reconciliation|Reconciliation]]) 엔진이자 아키텍처로, 동시성 렌더링([[Concurrent Rendering|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]] 이후의 동시성 기능 활용**
|
|
이러한 아키텍처를 기반으로 React 18 및 19에서는 개발자가 렌더링 우선순위를 직접 조정할 수 있는 동시성 훅을 제공한다.
|
|
* `[[useTransition|useTransition]]`: 특정 상태 업데이트를 낮은 우선순위로 지정하여, 무거운 필터링 작업이 진행되는 동안에도 타이핑 등의 긴급한 입력이 지연되지 않도록 한다 [16, 17].
|
|
* `[[useDeferredValue|useDeferredValue]]`: 외부에서 전달받은 값의 소비를 지연시켜 무거운 렌더링 중에 UI가 동결되는 것을 막는다 [17, 18].
|
|
* 또한 동시성 렌더링은 클라이언트의 [[Hydration|Hydration]] 과정에서도 메인 스레드를 심하게 막지 않고 작은 청크로 쪼개어 렌더링할 수 있도록 돕는다 [19].
|
|
|
|
---
|
|
|
|
**Fiber 노드와 작업 루프 (Work Loop)**
|
|
React의 각 컴포넌트는 Fiber 노드로 표현되며, 해당 컴포넌트의 타입, 상태([[State|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|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|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|Reconciliation]], Virtual DOM, Time-Slicing, [[Hydration|Hydration]]
|
|
- **Projects/Contexts:** [[React 18 Concurrent Features|React 18 Concurrent Features]], [[useTransition 및 useDeferredValue|useTransition 및 useDeferredValue]]
|
|
- **Contradictions/Notes:** 제공된 소스 전반에 걸쳐 Fiber 아키텍처와 동시성 렌더링의 매커니즘, 장점에 대해 일관된 설명을 제공하고 있으며, 상충되는 의견은 존재하지 않습니다.
|
|
|
|
---
|
|
*Last updated: 2026-04-25*
|
|
|
|
---
|
|
|
|
- **Related Topics:** [[Concurrent Rendering|Concurrent Rendering]], Reconciliation, [[Virtual DOM|Virtual DOM]]
|
|
- **Projects/Contexts:** React 16, [[Time-Slicing|Time-Slicing]]
|
|
- **Contradictions/Notes:** 소스에 관련 정보가 부족합니다.
|
|
|
|
---
|
|
*Last updated: 2026-04-25*
|
|
|
|
---
|
|
|
|
- **Related Topics:** [[Concurrent Rendering|Concurrent Rendering]], Reconciliation, Virtual DOM, [[Critical Rendering Path|Critical Rendering Path]]
|
|
- **Projects/Contexts:** [[브라우저 렌더링 과정 최적화 및 UI 반응성 개선|브라우저 렌더링 과정 최적화 및 UI 반응성 개선]]
|
|
- **Contradictions/Notes:** React Fiber 아키텍처 이전의 React는 "스택 재조정자(Stack Reconciler)"를 사용하여 컴포넌트 트리를 단일 재귀 호출로 처리했기 때문에, 애플리케이션의 크기가 커질 경우 메인 스레드가 차단([[Blocking|Blocking]])되어 사용자 입력이나 애니메이션이 끊기는 고질적인 문제가 존재했습니다. Fiber는 이를 작업 단위 분할로 해결했습니다 [1, 3].
|
|
|
|
---
|
|
*Last updated: 2026-04-25*
|