2nd/10_Wiki/Topics/React Fiber 및 동시성 렌더링.md

React Fiber 및 동시성 렌더링

📌Brief 시 Summary

React Fiber는 동기식 렌더링의 한계를 극복하고 동시성 렌더링(Concurrent Rendering)을 지원하기 위해 도입된 React의 재조정(Reconciliation) 엔진 아키텍처이다 [1, 2]. 전체 컴포넌트 트리를 단일 호출로 처리하던 기존 방식과 달리, 렌더링 작업을 '파이버 노드(Fiber node)'라는 작은 단위로 쪼개어 스케줄링한다 [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].

🔗 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