---
category: Frontend
tags: [auto-wikified, technical-documentation, frontend]
title: React Fiber & Concurrent Mode (동시성 모드)
description: "React Fiber는 일시 정지할 수 없는 콜스택 문제를 해결하고 렌더링 성능을 향상하기 위해 도입된 아키텍처입니다 [1]."
last_updated: 2026-05-04
---

# React Fiber & Concurrent Mode (동시성 모드)

## 📌 Brief Summary
React Fiber는 일시 정지할 수 없는 콜스택 문제를 해결하고 렌더링 성능을 향상하기 위해 도입된 아키텍처입니다 [1]. React 18부터는 Lanes 우선순위 시스템을 통해 작업을 중단하고 재개할 수 있는 동시성(Concurrent) 아키텍처를 지원합니다 [2]. 이를 바탕으로 선택적 하이드레이션(Selective Hydration)과 같이 사용자 인터랙션에 즉각적으로 반응하는 최적화된 처리가 가능해졌습니다 [2].

## 📖 Core Content
* **React Fiber의 도입 배경과 트리 구조:** 과거 React는 클라이언트 측에서 콜스택을 일시 정지할 수 없었고 재렌더링 속도가 느리다는 한계가 있었으며, 이를 해결하기 위해 자체적인 실행 엔진인 Fiber와 Reconciler를 구축했습니다 [1, 3]. React는 서버에서 렌더링된 DOM 트리를 순회하는 동시에 Fiber 트리를 병렬로 구축하며, 각 Fiber를 해당하는 DOM 노드와 일치시켜 `fiber.stateNode`에 참조를 저장하는 방식으로 작동합니다 [4].
* **선택적 하이드레이션(Selective Hydration):** 기존의 하이드레이션 방식에서는 전체 트리의 하이드레이션이 완료되기 전까지는 상호작용(Interactive)이 불가능하여, 트리 상단의 느린 컴포넌트가 하단 버튼의 클릭 핸들러 작동을 차단하는 문제가 있었습니다 [4]. React 18은 동시성 모드의 기반이 되는 'Lanes' 우선순위 시스템을 사용하여 하이드레이션을 중단하고 사용자 상호작용을 먼저 처리할 수 있도록 이 문제를 해결했습니다 [2].
* **중단 가능한 작업(Interruptible Work):** 사용자가 특정 요소를 클릭하면, React는 `SyncLane`을 사용하여 해당 경계로 이동한 뒤 상호작용을 처리할 수 있을 만큼만 우선적으로 하이드레이션을 수행하고 이후 나머지 트리에 대한 작업을 재개합니다 [2]. 이는 작업의 중단이 가능하고(Interruptible work) 우선순위에 따라 주도되는(Priority-driven) 아키텍처를 통해 이루어집니다 [2].

## ⚖️ Trade-offs & Caveats
소스에 관련 정보가 부족합니다. 
(제공된 소스 데이터에는 React Fiber 아키텍처 및 동시성 모드(Concurrent Mode) 자체를 도입하거나 최적화할 때 발생하는 구체적인 부작용, 제약 사항 또는 기술적 반대 급부(Trade-off)에 대한 설명이 포함되어 있지 않습니다.)

---
*Last updated: 2026-05-03*