📒 React Fiber

Fiber 는 React의 렌더링 엔진(재조정 엔진)으로, 컴포넌트 업데이트 작업을 더 효율적으로 처리하기 위해 React 16부터 도입된 새로운 아키텍쳐입니다.

기존 React는 컴포넌트를 렌더링할 때 작업을 한 번 시작하면 끝날 때까지 중단할 수 없었습니다. 반면 Fiber는 작업을 작은 단위로 나누어 필요할 때 중단하고 다시 이어서 실행할 수 있도록 설계되었습니다.

1️⃣ 왜 React Fiber가 등장했을까?

기존 React(React 15 이전)는 Stack Reconciler를 사용했습니다.

Stack Reconciler는 컴포넌트 업데이트가 시작되면 모든 렌더링 작업을 동기적으로 한 번에 처리했습니다.

즉, 렌더링이 시작되면 작업이 끝날 때까지 중간에 멈추거나 다른 작업을 먼저 수행할 수 없었습니다.

State 변경
    ↓
모든 컴포넌트 렌더링
    ↓
DOM 업데이트

이 방식은 컴포넌트의 수가 많아질수록 다음과 같은 문제가 발생할 수 있었습니다.

• 사용자 입력이 늦게 반응
• 스크롤이나 애니메이션이 끊길 수 있음
• 우선순위가 높은 작업도 현재 렌더링이 끝날 때까지 기다려야 함

이러한 문제를 해결하기 위해 작업을 작은 단위로 나누어 처리할 수 있는 새로운 렌더링 엔진인 Fiber를 도입했습니다.

2️⃣ Fiber의 핵심 아이디어

Fiber는 하나의 큰 렌더링 작업을 여러 개의 작은 작업(Unit of Work) 으로 분리합니다.

작업 1
  ↓
작업 2
  ↓
작업 3
  ↓
작업 4

각 작업은 필요에 따라 중간에 멈출 수 있으며, 이후 다시 이어서 실행할 수 있습니다.

즉, React는 브라우저의 상태를 확인하면서 다음과 같이 동작할 수 있습니다.

작업 수행
    ↓
브라우저에 제어권 반환
    ↓
사용자 입력 처리
    ↓
남은 작업 계속 수행

이 덕분에 렌더링 중에도 사용자의 입력이나 애니메이션을 더욱 부드럽게 처리할 수 있습니다.

3️⃣ Fiber Tree

React는 컴포넌트를 Fiber Node라는 객체로 관리합니다.

예를 들어 다음과 같은 컴포넌트 구조가 있다면

App
├── Header
├── Sidebar
└── Content
    ├── Article
    └── CommentList

React는 내부적으로 각 컴포넌트를 하나의 Fiber 객체로 생성하여 트리 형태로 관리합니다.

각 Fiber Node에는 다음과 같은 정보가 저장됩니다.

이러한 구조를 통해 React는 변경된 부분만 효율적으로 탐색하고 업데이트할 수 있습니다.

4️⃣ Stack Reconciler와 Fiber 비교

✍️ 한 줄 정리

React Fiber는 렌더링 작업을 작은 단위로 나누어 중단·재개·우선순위 조정이 가능하도록 만든 렌더링 엔진