React의 Reconciliation, 그리고 Fiber 이해하기

제이미·2025년 1월 17일

React

리액트

목록 보기

16/19

React를 다루다보면 Fiber라는 개념에 대해 한번씩 지나본 적이 있을 것이다. 이게 뭔지 같이 알아보자!

Fiber란?

: React에서 Fiber는 리액트 16버전부터 도입된 새로운 reconciliation 알고리즘 및 내부 아키텍처를 의미한다.

여기서, reconciliation은 무엇이고 기존의 reconciliation은 무엇일까?

Reconciliation이란?
: React에서 UI 업데이트를 효율적으로 관리하기 위해 사용하는 과정이다.
-> React가 이전 렌더 트리와 새로운 렌더 트리를 비교(이를 diff라고 부름)!
해 어떤 변경이 필요한지 계산하고 이를 DOM에 적용하는 것!

왜 React에서 이 Reconciliation이 필요할까?
: React는 상태나 props나 변경되면 UI를 다시 렌더링하는데 모든 UI를 처음부터 다시 그리면 당연히 비효율적이게 된다.
그래서, 이는 "필요한 부분만 업데이트" 하는 방식으로 동작하게 해준다!
이렇게 동작하기 위해 리액트의 Virtual DOM과 Reconciliation 알고리즘을 사용하는 것이다 :)

React 공식 문서에서 설명하는 Reconciliation은 아래 첨부하겠음!
React Reconciliation

그럼, Fiber Reconciliation은 React 16부터 나왔다는데 그 전에는 어떤 Reconciliation일까?

Fiber가 도입되기 전의 기존 Reconciliation은

1. 스택(stack) 기반 알고리즘
: 기존 React는 스택 기반의 재귀 호출로 렌더링 작업을 처리했다.
-> 컴포넌트 트리를 순차적으로 탐색하여 가상 돔을 비교하고 변경 사항을 반영했음

2. 동기적(Synchronous) 작업
: 모든 작업은 한 번에 처리 되었다고 한다!
-> UI 업데이트 중 작업이 중단되지 않아 메인 스레드를 차단하는 경우 발생 = 애니메이션 끊김 현상 및 사용자 입력 지연

3. 비효율적인 작업 분배
: 렌더링 작업이 길어졌을 때, 사용자 입력 처리같은 더 중요한 작업이 대기 상태에 놓이게 된다.
-> 우선순위를 관리하지 않으므로 사용자 경험 저하 발생

그리고 Fiber 도입으로 새로운 Reconciliation은

(Fiber는 기존 reconcilition의 한계를 극복하기 위해 도입된 것!)

1. Fiber Architecture
: Fiber는 컴포넌트 트리의 각 노드를 "단위 작업(chunk)"로 나누어 처리한다!
-> 렌더링 작업을 비동기적(asynchronous) 실행 가능

긴 작업이 있을 때 중단하고, 사용자 입력이나 애니메이션 같은 더 중요한 작업을 먼저 처리한 후 나머지 작업을 이어서 한다!

2. Time-Slicing
: Fiber는 작업을 일정 시간 실행하고, 남은 작업을 나중에 처리하는 방식을 사용한다.
-> 긴 작업이 메인 스레드를 차단하지 않음!

3. 우선순위 기반 작업 관리
: Fiber는 작업의 우선순위(Priority)를 계산해 중요도가 높은 작업을 먼저 실행한다!
-> 이를 위해 React는 아래와 같은 작업 우선순위를 도입했음

(1) Immediate(즉각): 사용자 입력, 애니메이션 등
(2) High(높음): 화면 렌더링
(3) Low(낮음): 백그라운드 작업(네트워크 요청 등)

4. 작업 중단 및 재개
: Fiber는 작업을 중단하고 필요할 때 다시 재개할 수 있다.
-> 기존 처리 방식과는 달리 더 유연하게 작업을 조율할 수 있게 됨

5. 효율적인 DOM 업데이트
: Fiber는 비교를 더욱 최적화하여 변경 사항만 DOM에 커밋한다.

위의 특징만 봐도, Fiber 도입 이후의 Reconciliation이 더 효율적이고 장점이 많은 걸 느낄 수 있다 :)

이 Fiber 기반 Reconciliation의 결과로는,

UI 업데이트가 더 부드럽고 사용자 경험이 지연 되지 않음
렌더링 성능 개선으로 복잡한 애플리케이션에서도 React를 효율적으로 사용
긴 렌더링 작업 중단 및 재개로 우선순위 작업을 먼저 처리해 더 나은 사용자 경험 제공

이러한 개선점이 있다는 것을 확인할 수가 있다~

Fiber Tree라는 걸 들어본 적이 있는데, 그럼 연관성은 무엇일까?

Fiber Tree란?

: Fiber 아키텍처 기반의 자료구조이며 컴포넌트 트리를 표현한다.
-> React의 새로운 Reconciliation 알고리즘에서 중심적인 역할을 하고, 컴포넌트 상태와 작업을 효율적으로 관리하기 위해 설계된 구조!

1. React 애플리케이션의 컴포넌트 트리를 Fiber 노드로 구성하여 관리
-> 각 Fiber 노드는 state, props, DOM 요소 정보, 그리고 reconciliation에 필요한 메타데이터를 포함함!

2. 작업 단위
-> Fiber는 컴포넌트 트리에서 작업을 처리하기 위한 최소 단위이다.

3. 링크드 리스트(Linked List) 구조
-> Fiber Tree는 트리 형태이지만, 내부적으로는 Linked List 구조를 사용한다.
= 부모, 자식, 형제 노드 간의 참조 효율적으로 관리

이 Fiber Tree에는 2가지 종류가 있다!

첫 번째로는 Current Tree - 화면에 렌더링된 현재 상태를 나타냄
두 번째로는 Work-in-Progress Tree - 업데이트 작업 중 생성되는 새로운 Fiber Tree
(Reconciliation 과정에서 이 트리가 변경 사항을 계산하고, 작업이 완료되면 Current Tree로 교체됨)

그럼, 이 Fiber Tree의 역할은 무엇일까?

1. 컴포넌트 상태 관리

: 각 Fiber 노드가 컴포넌트와 연결되어 있어 해당 컴포넌트의 props, state, key, ref 등의 정보 저장

2. 작업 추적

: Fiber Tree는 작업 단위를 나눠 추적해 작업 우선순위를 기반으로 필요한 부분만 업데이트

3. Reconciliation 과정 지원

: Fiber Tree는 새로운 Work-in-Progress Tree와 Current Tree의 변경 사항을 비교하고 필요한 업데이트 계산

4. 작업 중단 및 재개 지원

: Fiber Tree는 React가 작업을 중단 또는 재개할 수 있도록 설계됨

Fiber Tree의 동작 과정이 여기서 또 궁금하죠?

1. Reconciliation 시작
: 리액트는 새로운 렌더링 작업이 시작되면, Work-in-Progress Tree를 생성해 새로운 상태와 이전의 상태를 비교한다.

2. 작업 처리
: Fiber Tree의 각 노드가 순차적으로 처리되며, 작업 우선순위를 기반으로 중요한 작업들이 먼저 처리 된다!

3. DOM 업데이트
: Fiber Tree의 작업이 완료되면, 리액트는 변경 사항을 실제 DOM에 반영한다.

이쯤되니, Fiber 아키텍처의 역할 중 비동기 작업 처리 그리고 에러 복구에 대해 궁금해졌다!(저만 궁금하다구요? 하핫)

1. Fiber 아키텍처는 Suspense와 Concurrent Mode의 핵심 기반

: Fiber의 비동기 작업, 우선순위 처리, 작업 쪼개기 및 중단/재개 역할로 Suspense와 Concurrent Mode가 작동할 수 있다!

(1) Suspense

: 비동기 작업(Ex: 코드 스플리팅, 데이터 로딩) 중에 화면에 완전히 멈추지 않도록 작업 완료까지 fallback UI를 보여준다
-> Fiber는 이러한 비동기 작업의 상태를 추적하고 관리하는 핵심 역할을 함!
= fallback 렌더링은 낮은 우선순위를 가지므로, 더 중요한 작업이 먼저 처리 될 수 있음

(2) Concurrent Mode

: UI 작업을 비동기적으로 처리하여 애플리케이션이 더 응답성 있게 동작하도록 돕는 모드
-> Fiber 아키텍처가 Concurrent Mode의 비동기 동작을 가능케 함!
= Fiber의 작업 분할과 작업 중단/재개 가능을 확장하여 동시성 모드는 UI가 더 부드럽게 업데이트 되도록 한다.