STUDY/[ React ]

React Fiber Node란?

Lim임 2025. 11. 27. 03:05

React Fiber 노드는 React가 렌더링을 더 똑똑하고 빠르게 하기 위해 도입한 내부 자료구조(Internal data structure)
“React 컴포넌트 하나하나를 표현하는 작은 객체”라고 생각하면 훨씬 이해 가능.

React Fiber 노드(Fiber Node)란?

React는 컴포넌트 트리를 화면에 그리기 위해 내부적으로 Fiber Tree라는 구조를 만든다.
그리고 각 컴포넌트 하나는 각각 자신의 Fiber 노드를 가진다.

즉:

하나의 컴포넌트 → 하나의 Fiber 노드

function TodoItem() { ... }  // → TodoItem Fiber 노드 생성
function TodoList() { ... } // → TodoList Fiber 노드 생성

 

이 Fiber 노드는 컴포넌트의 모든 정보와 렌더링 상태를 들고 있는 일종의 “작은 객체”

🧬 Fiber 노드가 내부적으로 갖는 정보

Fiber 하나는 대략 이런 것들을 들고 있음:

속성설명
type 이 노드가 어떤 컴포넌트를 나타내는지 (함수/클래스/DOM)
stateNode 실제 DOM 노드 또는 클래스 인스턴스
pendingProps 새로 받아온 props
memoizedState useState/useReducer 등 Hook의 저장된 상태
child / sibling / return 자식, 형제, 부모 Fiber 노드 (트리 구조)
updateQueue 필요한 업데이트 목록
flags 어떤 업데이트(삽입, 삭제 등)를 해야 하는지

→ 즉 Fiber 노드가 React 상태 관리와 DOM 업데이트 계획을 모두 품고 있다.

🌳 Fiber Tree = React 앱을 표현하는 내부 트리

예를 들어:

<App>
  <Header />
  <TodoList>
     <TodoItem />
  </TodoList>
</App>

이렇게 생긴 컴포넌트 구조는 내부적으로 이렇게 변환:

App Fiber
 ├── Header Fiber
 └── TodoList Fiber
       └── TodoItem Fiber

 

컴포넌트 트리와 1:1 매칭되는 “Fiber Tree”가 생기는 거지.

그럼 Fiber는 왜 생겨났나? (핵심!)

이전(React 15 이하)에는 렌더링이 “call stack 방식”이라
한 번 렌더링이 시작되면 중간에 멈출 수가 없었다.

→ 화면이 순간적으로 멈추는 “크게 끊기는 렌더링”이 발생함.

React 팀은 이것을 해결하려고 Fiber를 만들었다.

Fiber 구조의 가장 큰 목적: “도중 멈추기(Interruptible Rendering)”

React 16부터는 Fiber 덕분에 렌더링을 잘게 쪼갤 수 있게 됨.

 예시:

  • 렌더링 작업이 너무 오래 걸리면 중간에 멈춰서
    👉 브라우저에 “사용자 입력 처리 먼저 해!”라고 양보 가능
  • 우선순위(Priority)를 지정해서
    👉 화면 필수 업데이트 먼저, 덜 중요한 건 나중에

즉, Fiber는 React 렌더링을 스케줄링 가능한 작업(job) 으로 바꿔주는 핵심 기술.

🎯 Fiber 노드가 하는 3가지 핵심 역할

1) 상태 관리

  • useState의 값 저장
  • useEffect의 목록 저장
    → Hook들이 “순서 기반”으로 동작하는 이유도 Fiber 노드에서 Hook list를 배열처럼 관리하기 때문

2) 렌더링 스케줄링

  • 우선순위 부여
  • 중단/재개
  • 오래 걸리는 렌더링 쪼개기

3) DOM 업데이트 계획

  • 어떤 노드를 추가/삭제/변경할지 기록
  • 마지막에 실제 DOM 업데이트를 수행

그림으로 직관적으로 설명 (텍스트 기반)

컴포넌트 = Fiber 노드 하나

[Component: TodoItem]
   ↓
[Fiber Node]
  • props
  • state
  • hooks
  • children
  • sibling
  • parent

Fiber Tree

          [App Fiber]
         /           \
 [Header Fiber]   [TodoList Fiber]
                         |
                  [TodoItem Fiber]

Hook은 Fiber 내부에 이런 식으로 저장됨

Fiber.memoizedState = [
   Hook1 (useState)
   Hook2 (useEffect)
   Hook3 (useRef)
]

 

이 순서를 절대 바꿀 수 없기 때문에
조건문/반복문/일반 함수에서 Hook을 호출하면 안 되는 것.

결론

React Fiber 노드는:

 

React 컴포넌트를 표현하는 내부 객체이며

모든 상태(Hook), DOM정보, 업데이트 정보를 저장하고

렌더링을 잘게 쪼개서 멈출 수 있게 해주며

실제 DOM 변경을 계획하는 핵심 구조다.