[리액트] Fiber란, React 컴포넌트별 작업단위

https://github.com/acdlite/react-fiber-architecture

 

이 문서를 참고하였습니다.

1. React Fiber란 무엇인가요?

React Fiber는 React의 핵심 알고리즘(reconciler)을 완전히 새로 구현한 것입니다. 애니메이션, 레이아웃, 제스처와 같은 사용자 경험 중심 작업을 더 잘 처리하려고 설계되었습니다.

 

기존에는 어떤 문제가 있었던 걸까요?

React 15까지는 재귀호출기반 동기 렌더링이였습니다. 즉 한번 렌더링이 시작되면 중단 없이 끝까지 실행되어야했습니다. 결과적으로 렌더링이 길어지면 에니메이션이 끊기고 사용자 입력이 무시되며 전체 앱이 멈춘듯한 느낌이 들었습니다. 그렇기때문에 React 팀은 다음과 같은 목표를 가지고 Fiber를 설계했습니다.

 

Fiber의 특징

1. 작업 단위 분할 (Incremental Rendering) 큰 렌더링 작업을 여러 작은 단위로 나눠서 처리할 수 있게 함

• 예전에는 렌더링 도중 다른 작업(예: 스크롤, 클릭)에 반응할 수 없었음
• Fiber는 렌더링을 중단하고, 우선순위가 높은 작업(예: 제스처) 을 먼저 실행 가능

2. 작업 우선순위 부여 어떤 작업이 더 중요(긴급)한지를 판단하고 순서를 조절

• 예: 애니메이션이나 입력 이벤트는 고우선
• 데이터 패칭이나 느린 컴포넌트 렌더링은 저우선
• 이로 인해 사용자 경험이 훨씬 부드러워짐.

3. 작업 중단 및 재개 (Pause and Resume) 한 번에 모든 걸 렌더링하지 않고, 여유 있을 때 조금씩 진행 가능

• 브라우저가 애니메이션 프레임이나 사용자 입력을 처리할 수 있게 함
• React 18에서는 이 개념을 확장해 Concurrent Mode 도입

 

Fiber를 적용한 해결점

• 렌더링 작업을 쪼개서(fiber 단위로) 프레임 단위로 나눠 처리할 수 있음.
• 중단, 재시작, 우선순위 지정, 재사용 등이 가능.
• React가 똑똑하게 작업을 스케줄링할 수 있게 됨.

 

그렇다면  Fiber는 어떻게 구성되있을까요?

 

2. Fiber 트리 구성

function App() {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
}


// 이구조에서는 React가 다음과 같이 Fiber트리를 구성합니다.
App
├── div
│   ├── Header
│   ├── Main
│   └── Footer

App, div, Header, Main, Footer 각각 하나의 Fiber 객체를 가집니다. 이 Fiber 객체들은 서로 부모-자식-형제 관계로 연결됩니다. (child, sibling, return 포인터로)

 

Fiber 객체의 필드

type	컴포넌트 타입 (함수, 클래스, div 등)
key	리스트 diff에서 사용되는 고유 값
child, sibling, return	트리 구조를 구성하는 포인터들
pendingProps, memoizedProps	변경 전후 props (차이 없으면 재사용 가능)
alternate	현재 fiber와 연결된 작업 중 fiber (work-in-progress)
output	렌더링 결과 (예: DOM 요소 등)

위의 표는 Fiber 객체의 필드 부분입니다. 이필드를 보아 컴포넌트별로 fiber type이 존재하고 포인터를 통해 fiber tree를 관리하고있는 것을 알수있었습니다.

그렇다면 업데이트가 된다면 Fiber 트리는 어떻게 교체가될까요?

 

3. Fiber 트리 업데이트시 2가지 단계

React는 기존 Fiber 트리를 그대로 두고, 새로운 Work-in-Progress Fiber 트리를 만들어 비교(diff)합니다. 그래서 같은 컴포넌트라도 렌더링 과정 중에는 2개의 Fiber 객체가 존재할 수 있습니다.

 

current: 화면에 현재 보이는 Fiber

workInProgress: 업데이트 중인 새 Fiber

 

어떤 컴포넌트가 렌더링 중이면 기존 fiber와는 별개로 작업 중인 fiber (alternate)를 따로 만듭니다. 두 fiber는 서로 alternate로 연결되어 있고, 렌더링이 끝나면 새로운 fiber가 current가 됩니다. 이렇게 하면 성능 저하 없이 계속 상태를 유지할 수 있습니다.

 

업데이트 즉 렌더링 과정은 크게 두가지로 나뉩니다.

 

1. Reconciliation 단계 (작업 중인 Fiber 트리 생성)

2. Commit 단계 (실제 DOM에 반영)

 

 

1. Reconciliation 단계

[현재 렌더 중]
      A (current)
      |
      B
     / \
    C   D

[렌더링 중 새로운 트리]
      A' (workInProgress)
      |
      B'
     / \
    C'  D'

각 노드는 서로 alternate 참조:
A <-> A'
B <-> B'
C <-> C'
D <-> D'

• 이 단계에서는 workInProgress 트리생성
• 변경 사항을 계산하고, 어느 부분이 업데이트되어야 할지 결정
• 여기까지는 가상 트리 작업이라 실제 DOM에는 영향x
• 이 과정은 시간 분할(Time slicing)로 쪼개서 비동기 처리 가능

 

2.  Commint 단계

reconciliation이 모두 끝나면 React가 작업 중인 Fiber 트리를 ‘현재 트리’로 교체합니다. 이 시점에 변경된 내용이 실제 DOM에 한꺼번에 반영됩니다. commit 단계는 동기적으로 처리돼서, 사용자에게 보이는 화면이 완전히 바뀌는 시점입니다.

 

궁금증)  그렇다면 우선순위가높고 급한건 먼저 커밋이되나요?

 

네. 급하고 중요한 건 먼저 렌더링되고 → 커밋도 먼저 됩니다.

React는 Fiber를 통해 렌더링 작업을 우선순위 기반으로 쪼개어 처리합니다. 사용자 입력처럼 급한 작업은 먼저 렌더되고, 이후 커밋 단계에서 실제 DOM에 반영됩니다. 덕분에 사용자는 무거운 작업이 진행 중이어도 버튼 클릭 등의 UI 반응을 빠르게 체감할 수 있습니다.

 

 

4. 결론 요약

왜 Fiber가 도입됐나요?	UI 성능을 개선하고, 렌더링을 더 정밀하게 제어하기 위해
Fiber는 무엇인가요?	React 내부에서 사용하는 작업 단위이자, 가상 스택 프레임
어떤 점이 좋아졌나요?	렌더링을 중단·재개·우선순위 지정할 수 있음. 더 부드러운 사용자 경험 가능
개발자가 알아야 할 핵심은?	Fiber는 내부 동작이며, 주로 동시성 기능, 렌더링 최적화에 직접적 영향을 미침

 

5. 바로 적용할 수 있는 것들

startTransition()	긴급하지 않은 상태 업데이트를 구분하여 UI 반응성을 높여줍니다	비동기 UI 업데이트 처리 (검색 필터 등)
useDeferredValue()	입력값에 따른 처리 지연을 적용할 수 있어, 사용자가 입력하는 도중에 무거운 연산이나 필터링이 바로 실행되지 않도록 합니다	입력값에 따른 처리 지연 (입력 도중 필터링 X)
Suspense / lazy	컴포넌트를 필요한 순간에만 불러와 초기 로딩 속도를 개선합니다.	느린 컴포넌트 지연 로딩
컴포넌트 분리	Fiber 단위가 작아질수록 렌더링 효율이 좋아집니다	Fiber 단위 작게 유지해 성능 확보
React.memo	필요 없는 리렌더링을 방지해 Fiber 작업을 줄이고, 렌더링 성능을 향상	필요 없는 re-render 방지로 Fiber 작업 줄이기

 

지금까지 React Fiber의 개념과 특징에 대해서 알아보았습니다.
Fiber의 개념을 이용해 렌더링 방식을 이해하고, 스케줄링을 조절할 수 있는 memo, lazy 등의 기능을 적극 활용한다면 이를 통해 불필요한 리렌더링을 줄이고, 코드 분할과 비동기 로딩을 효과적으로 구현할 수 있습니다. 또한, startTransition과 같은 우선순위 기반 업데이트 관리 기법을 사용해 사용자 인터랙션을 더욱 부드럽고 빠르게 처리할 수 있습니다.

React Fiber의 구조를 이해하는 좋은 시간이 된거같습니다.