<div id="readability-page-1" class="page"><div>
 <div id="SE-53d071c4-4f15-49f6-a884-da3f49062c02">
 지난 챕터에서 재조정(Reconciliation)이 "무엇이 바뀌었는지 계산하는 과정"이라고 배웠습니다. 그런데 한 가지 의문이 남죠. 동시성 — 렌더링을 중간에 멈췄다가 재개하는 능력 — 은 도대체 어떻게 가능한 걸까요? 그 답이 Fiber 아키텍처입니다. 이 챕터는 깊은 내부 구현이 아니라, 면접에서 설명할 수 있을 정도의 맛보기를 목표로 합니다.
​
미리 짚어둘 것: Fiber는 React의 내부 구현 세부사항입니다. 우리가 직접 코드로 만질 일은 없습니다. 그래도 "왜 동시성이 가능한가"를 이해하면, useTransition 같은 도구를 훨씬 또렷하게 쓸 수 있습니다.

 </div> <div id="SE-900a5481-533e-47b2-afbc-6857a1ec377f">
 ​
React 16 이전의 재조정 엔진(흔히 Stack Reconciler라 부릅니다)은 재귀적이고 동기적이었습니다. 컴포넌트 트리를 위에서 아래로 재귀 호출하며 한 번에 쭉 처리했죠. 문제는 한번 시작하면 끝날 때까지 멈출 수 없다는 점이었습니다.
​
트리가 크면 이 작업이 수십 ms씩 걸리는데, 그동안 메인 스레드가 통째로 점유됩니다. 자바스크립트는 단일 스레드라, 그사이 사용자가 입력을 하거나 브라우저가 화면을 그리려 해도 전부 기다려야 했습니다. "무거운 렌더가 입력을 막는" 그 현상의 근본 원인이죠. 재조정을 잘게 쪼개서, 급한 일이 생기면 잠깐 양보할 수만 있다면 좋을 텐데 — 옛 구조로는 불가능했습니다.

 </div> <div id="SE-e3b8d581-b67b-4fd0-8458-105500812320">
 ​
React 16은 이 재조정 엔진을 통째로 다시 만들었습니다. 그게 Fiber 아키텍처입니다. 핵심 아이디어는 렌더링 작업을 "작은 단위"로 쪼개, 중단했다가 재개할 수 있게 만든 것입니다.
​
여기서 "fiber"는 그 작업의 한 단위를 가리킵니다. 컴포넌트 트리의 각 노드마다 하나씩 대응하는 자바스크립트 객체인데, 그 컴포넌트의 타입·props·state, 그리고 다른 fiber로 이어지는 연결(자식·형제·부모) 정보를 담고 있습니다.

 </div> <div id="SE-e6a88f75-22f9-4faa-a7e1-6090683159be">
 (개념도) 각 노드 = 하나의 fiber, 서로 포인터로 연결

App ──child──▶ List ──child──▶ Item
 │ │
 └─ (return/부모) (sibling/형제) ──▶ Item ──▶ Item
 </div> <div id="SE-2422e644-70f3-4947-8906-da76a92c78d4">
 옛 방식이 "재귀 호출 스택"에 의존해 중간에 멈출 수 없었다면, Fiber는 작업을 이 객체들의 연결을 따라가는 반복(loop)으로 바꿨습니다. 그래서 React는 fiber 하나를 처리한 뒤 "계속할까, 잠깐 멈출까?"를 판단할 수 있습니다. 멈췄다가도 끊긴 지점부터 다시 이어서 할 수 있고요. 중단·재개가 가능해진 겁니다.
 </div> <div id="SE-46fec1ed-bc8f-4b4a-bef7-8f50cb47146f">
 두 단계 — 렌더(중단 가능) vs 커밋(중단 불가)
 </div> <div id="SE-de373bad-6f15-4cf7-a476-1bd2104909e1">
 ​
화면 갱신이 렌더 → 커밋 단계로 일어난다고 했죠. Fiber는 이 둘을 성격이 전혀 다른 두 국면으로 분리합니다. 이 구분이 면접 핵심입니다.
​
​
① 렌더(reconcile) 단계
중단 가능. React가 새 fiber 트리를 만들며 "무엇이 바뀌었는지"를 계산하는 단계입니다(지난 챕터의 재조정이 여기서 일어납니다). 이 단계는 실제 DOM을 건드리지 않으며, 그래서 멈췄다 재개하거나, 버리고 다시 시작해도 안전합니다. 화면에 아무것도 반영되지 않은 "초안" 작업이니까요.
​
​
② 커밋 단계
중단 불가. 계산이 끝나면, 그 결과를 실제 DOM에 한 번에 반영합니다. 이 단계는 동기적이고 중단할 수 없습니다. 화면을 절반만 바꾸다 멈추면 깨진 UI가 보일 테니까요.
​
순수성이 여기서 또 만납니다. 렌더 단계는 중단·재시작·폐기가 자유로워야 합니다. 그러려면 렌더링 본문이 순수해야 합니다 — 여러 번 실행되거나 버려져도 부수효과가 없어야 하니까요. 순수성은 단지 규칙이 아니라, Fiber가 렌더를 자유롭게 다룰 수 있게 하는 전제입니다. (StrictMode가 개발 중 컴포넌트를 두 번 호출해 순수성을 검사하는 이유와도 통합니다.)

 </div> <div id="SE-900dab5a-aed5-4d13-bbba-ca0c34ce9bb5">
 ​
<ul><li>useTransition / useDeferredValue — 무거운 렌더(비긴급)를 진행하다가 사용자 입력(긴급)이 들어오면, 하던 렌더를 잠시 멈추고 입력을 먼저 처리한 뒤 다시 이어갑니다. Fiber가 렌더를 중단·재개할 수 있어서 가능한 일이죠.
</li><li>Suspense — 데이터가 아직 안 왔으면 그 부분의 렌더를 잠시 보류하고 fallback을 보여주다가, 준비되면 이어서 렌더합니다. 역시 "렌더를 멈췄다 재개"하는 능력에 기댑니다.
</li></ul>​
React는 각 갱신에 우선순위를 매깁니다(입력 같은 긴급 업데이트 vs 전환 같은 비긴급 업데이트). Fiber 구조 덕분에 React는 "지금 이 비긴급 렌더를 멈추고 긴급한 걸 먼저 할까?"를 매 순간 판단할 수 있습니다.

 </div> <div id="SE-4eb93bd1-94ab-4777-8c9c-fa3aa0b11f8c">
 ​
좋은 소식: Fiber를 직접 다룰 일은 없습니다. fiber 객체를 만들거나 스케줄링을 제어하는 건 전부 React 내부의 몫입니다. 우리는 그 위에서 useTransition·useDeferredValue·Suspense 같은 도구를 통해 동시성의 혜택을 누릴 뿐이죠.
​
그러니 이 챕터의 목표는 "Fiber를 구현할 줄 알기"가 아니라, "React가 렌더를 중단·재개할 수 있고, 그래서 동시성이 가능하다"는 멘탈모델을 갖는 것입니다. 그 정도면 면접에서도, 실무에서 동시성 도구를 고를 때도 충분합니다.
​
​
면접 포인트 정리
<ul><li>Fiber란? React 16부터 도입된 재조정 엔진의 재구현. 렌더링 작업을 작은 단위(fiber)로 쪼개 중단·재개할 수 있게 만들었다.
</li><li>옛 방식(Stack Reconciler)과의 차이? 옛 방식은 재귀적·동기적이라 한번 시작하면 멈출 수 없었다. Fiber는 작업을 쪼개 양보·재개가 가능하다.
</li><li>두 단계? 렌더(reconcile) 단계는 DOM을 안 건드려 중단 가능, 커밋 단계는 DOM에 반영하므로 동기·중단 불가.
</li><li>왜 중요한가? 렌더를 중단할 수 있어서 동시성(useTransition·Suspense 등)이 가능해졌다.
</li></ul>
 </div> <div id="SE-c276582d-3bc7-411c-9740-f555d5d25532">
 ​
<ul><li>Fiber는 React 16부터의 재조정 엔진으로, 렌더링을 작은 단위로 쪼개 중단·재개할 수 있게 한 구조다.
</li><li>옛 Stack Reconciler는 재귀적·동기적이라 한번 시작한 렌더를 멈출 수 없었다(→ 무거운 렌더가 입력을 막음).
</li><li>작업은 두 단계: 렌더 단계(DOM 미반영, 중단·재시작 가능)와 커밋 단계(DOM 반영, 동기·중단 불가). 렌더 → 커밋이 이것이다.
</li><li>렌더를 중단할 수 있다는 점이 동시성(useTransition·useDeferredValue·Suspense)의 바탕이다.
</li><li>Fiber는 내부 구현이라 직접 만질 일은 없다. "중단·재개가 가능하다"는 멘탈모델이면 충분하다.
</li></ul>​
지금까지 "무엇이 바뀌나(재조정)"와 "어떻게 그 일을 처리하나(Fiber)"를 봤습니다. 다음 챕터에서는 더 실전적인 질문에 답합니다. "컴포넌트는 정확히 언제 다시 렌더되는가?" state·props·context·부모 — 시즌 1 곳곳에 흩어져 있던 리렌더 조건을 한 장으로 총정리합니다.

 </div> <div id="SE-de3da8e7-854d-45a2-b286-a3648e0c6663">
 ​
<ul><li>Render and Commit — React 공식 문서 (렌더 → 커밋 두 단계; 확인: 2026-06-24)
</li><li>React 19 — React 공식 블로그 (동시성 기능 맥락; 확인: 2026-06-24)
</li></ul>
 </div> </div></div>

개발하는 기획자. 기획하는 개발자.

지난 챕터에서 재조정(Reconciliation)이 "무엇이 바뀌었는지 계산하는 과정"이라고 배웠습니다. 그런데 한 가지 의문이 남죠. 동시성 — 렌더링을 중간에 멈췄다가 재개하는 능력 — 은 도대체 어떻게 가능한 걸까요? 그 답이 Fiber 아키텍처입니다. 이 챕터는 깊은 내부 구현이 아니라, 면접에서 설명할 수 있을 정도의 맛보기를 목표로 합니다. 미리 짚어둘 것: Fiber는 React의 내부 구현 세부사항입니다. 우리가 직접 코드로 만질 일은 없습니다. 그래도 "왜 동시성이 가능한가"를 이해하면, useTransition 같은 도구를 훨씬 또렷하게 쓸 수 있습니다. 옛날 방식의 한계 — 멈출 수 없는 렌더링 React 16 이전의 재조정.......

Fiber 아키텍처 맛보기 — 동시성은 어떻게 가능한가

댓글