[React] React Fiber: 리액트의 새로운 엔진 심층 탐구! 🚀

🚀 React Fiber 톺아 보기! 🚀

React Fiber는 React가 UI 업데이트를 처리하는 새로운 코어 알고리즘으로, React 16에서 처음 도입되었습니다.

 

Fiber는 React를 한층 더 강력하고 유연하게 만들어주는 기술로, 비동기 렌더링을 가능하게 하여 복잡한 UI를 빠르고 부드럽게 렌더링할 수 있도록 도와줍니다. 특히, Fiber는 긴 작업을 작은 단위로 나누어 우선순위에 따라 처리할 수 있는 기능을 제공하여, 사용자가 상호작용하는 동안에도 UI가 원활하게 업데이트될 수 있도록 합니다.

 

또한, Fiber는 다양한 렌더링 전략을 지원하여 개발자가 애플리케이션의 요구에 맞는 최적의 성능을 달성할 수 있게 해준다고 합니다. 이러한 점에서 Fiber는 React의 핵심 아키텍처를 변화시켰고 개발자에게 더 많은 제어권과 유연성을 제공했습다.

 

이번 글에서는 React Fiber의 주요 개념과 작동 방식, 그리고 이를 활용하여 어떻게 더 효율적이고 반응성이 뛰어난 애플리케이션을 만들 수 있는지에 대해 자세히 살펴보겠습니다.

 

❣️ 참고 사이트

https://d2.naver.com/helloworld/2690975,

https://medium.com/stayfolio-tech/react%EA%B0%80-0-016%EC%B4%88%EB%A7%88%EB%8B%A4-%ED%95%98%EB%8A%94-%EC%9D%BC-feat-fiber-1b9c3839675a,

https://github.com/acdlite/react-fiber-architecture/blob/master/README.md

---

🌟 React Fiber란 무엇인가?

1️⃣ 기본 정의

React Fiber는 React의 재조정(Reconciliation) 알고리즘을 다시 설계한 것으로, 다음과 같은 목표를 가지고 있습니다:

• 중단 가능한 렌더링: 작업을 나눠서 처리하고, 중요한 작업을 먼저 처리
• 우선순위 기반 업데이트: 중요한 작업에 더 많은 리소스를 할당
• 빠른 애니메이션 처리: 애니메이션, 레이아웃, 제스처 등과 같은 UI 성능 개선을 통한 부드러운 처리

2️⃣ 왜 Fiber가 등장했을까?

기존 React의 재조정 알고리즘(스택 기반)은 모든 작업을 동기적(Synchronous)으로 처리했습니다.

즉, 한 번 렌더링이 시작되면 중단 없이 끝까지 처리해야 했죠.

 

하지만 이렇게 되면:

• 복잡한 UI를 렌더링할 때 응답 지연이 발생
• 사용자 입력(클릭, 스크롤 등)에 즉각적으로 반응하기 어렵다.

Fiber는 이런 한계를 극복하고, 렌더링 작업을 잘게 나눠 브라우저가 사용자와의 상호작용을 놓치지 않도록 설계되었습니다.

---

🧩 React Fiber의 구조

1️⃣  Fiber 노드(Fiber Node)

Fiber는 Fiber Node라는 데이터 구조를 기반으로 동작합니다. 이 노드는 React 컴포넌트 트리의 각 요소를 나타냅니다.

• 구성 요소
  • 각 Fiber 노드는 컴포넌트 정보(예: 타입, props), 상태(state), DOM 정보(예: 실제 DOM 요소에 대한 참조) 등을 포함
  • 이를 통해 React는 각 컴포넌트의 현재 상태를 효율적으로 추적할 수 있음
• 업데이트 선택성
  • 렌더링 작업이 진행되면서 업데이트가 필요한 노드만 선택적으로 처리할 수 있음 => 불필요한 업데이트를 방지, 성능을 최적화
  • 이 과정은 React의 효율적인 "재조정(reconciliation)"을 가능하게 함 + 필요한 부분만 빠르게 업데이트할 수 있음
• 링크 구조
  • 각 Fiber 노드는 부모 노드와 자식 노드에 대한 링크를 가지고 있어, 전체 컴포넌트 트리를 쉽게 탐색할 수 있음
  • 이러한 링크 구조는 트리의 특정 부분만 업데이트할 수 있게 해줌

2️⃣  작업 단위(Work Unit)

Fiber는 작업을 잘게 나눠 작업 단위(Unit of Work)로 처리합니다.

• 중단 및 재개
  • 렌더링 중에도 작업을 중단하고 나중에 재개할 수 있어, 긴 작업이 사용자 인터랙션에 의해 방해받지 않도록 합니다.
  • 예를 들어, 사용자 입력이나 애니메이션과 같은 더 중요한 작업이 우선적으로 처리되도록 보장합니다.
• 비동기 처리
  • 이를 통해 비동기적으로 작업을 처리할 수 있으며, 사용자 경험을 저해하지 않으면서도 복잡한 UI를 효과적으로 렌더링할 수 있습니다.
  • 이 방식은 특히 성능이 중요한 대형 애플리케이션에서 큰 장점을 제공합니다.
• 우선순위 조정
  • 각 작업 단위는 우선순위를 가질 수 있으며, 높은 우선순위의 작업이 먼저 처리되도록 설계되어 있습니다.
  • 이로 인해 React 애플리케이션의 반응성이 크게 향상됩니다.

---

💡 React Fiber의 주요 특징

1️⃣ 중단 가능한 렌더링

Fiber의 가장 큰 혁신은 작업을 중단하고 나중에 재개할 수 있다는 점입니다.

• 긴 렌더링 작업 중간에 사용자 이벤트(예: 클릭, 스크롤)를 처리할 수 있습니다.
• 렌더링 작업은 브라우저의 Idle Time(여유 시간)에 다시 시작되며, 이 과정에서 사용자가 인터페이스와 상호작용 할 수 있게 됩니다.
• 작업을 일시 중단한 후, 필요에 따라 재개하거나, 다른 작업에 재활용할 수 있어 리소스를 효율적으로 관리할 수 있습니다.

2️⃣ 우선순위 기반 렌더링

Fiber는 작업의 우선순위(Priority)를 기반으로 렌더링 순서를 결정합니다.

• 높은 우선순위(사용자 입력, 애니메이션 등)는 즉시 처리되어 사용자에게 빠른 반응을 제공합니다.
• 낮은 우선순위(백그라운드 데이터 로드, 비가시적 DOM 업데이트 등)는 사용자의 인터페이스에 영향을 미치지 않는 범위에서 처리됩니다.

개발자는 이런 업데이트의 우선순위를 설정할 수 있어, 더 나은 성능과 사용자 경험을 제공할 수 있습니다.

3️⃣ 더 세밀한 재조정

Fiber는 렌더링 트리를 더욱 세밀하게 관리하여 불필요한 DOM 업데이트를 줄이고, 효율적으로 작업을 처리합니다.

• 각 컴포넌트의 상태 변화에 따라 필요한 부분만 업데이트할 수 있어, 전체 DOM을 다시 그리는 대신 최소한의 변경만 적용합니다.
• 이로 인해 성능이 향상되고, 애플리케이션의 반응성이 높아집니다.

4️⃣ 점진적 렌더링 (Incremental Rendering)

렌더링 작업을 여러 프레임에 나누어 처리하는 것이 가능합니다.

• 긴 작업을 여러 단계로 나누어 처리함으로써, UI가 멈추지 않고 사용자에게 부드러운 경험을 제공합니다.
• 이 방식은 특히 복잡한 UI를 다룰 때 유용하며, 사용자 상호작용을 더욱 원활하게 만듭니다.

5️⃣ 동시성 지원

Fiber는 동시성을 지원하여 여러 작업을 동시에 처리할 수 있습니다.

• 이를 통해 애플리케이션은 여러 작업을 병렬로 수행할 수 있으며, 특정 작업이 완료될 때까지 다른 작업이 멈추지 않습니다.
• 이 기능은 사용자 인터페이스의 응답성을 높이고, 복잡한 애플리케이션에서의 성능을 개선하는 데 큰 도움이 됩니다.

---

⚙️ Fiber의 동작 원리

1️⃣ 렌더 단계(Render Phase):

• 가상 DOM 트리 생성
  • 이 단계에서 React는 가상 DOM 트리를 생성하고, 현재 상태와 이전 상태를 비교하여 필요한 업데이트를 계산합니다.
  • 이 과정은 React의 효율적인 재조정(reconciliation) 알고리즘을 통해 이루어집니다.
• 중단 가능성
  • 렌더 단계는 중단 가능하다는 특징이 있습니다. 작업 단위를 나누어 처리하기 때문에, 긴 렌더링 작업 중간에 사용자 이벤트(예: 클릭, 스크롤)가 발생하면 해당 이벤트를 먼저 처리할 수 있습니다.
  • 이를 통해 사용자 경험을 저해하지 않고, 애플리케이션의 반응성을 높일 수 있습니다.
• 작업 단위 처리
  • 각 작업은 작은 단위로 나누어져 처리되며, 필요에 따라 중단하고 재개할 수 있습니다.
  • 이러한 비동기적 특성 덕분에, 렌더링 과정에서 높은 우선순위를 가진 작업이 먼저 수행될 수 있습니다.

2️⃣ 커밋 단계(Commit Phase):

• DOM 업데이트 반영
  • 커밋 단계에서는 이전 단계에서 계산된 업데이트를 실제 DOM에 반영합니다.
  • 이 단계에서는 변경된 부분만 업데이트되므로 성능이 최적화됩니다.
• 중단 불가능성
  • 커밋 단계는 중단할 수 없으며, 빠르게 완료되어야 합니다.
  • 이 단계가 완료되면 사용자에게 변경 사항이 즉시 반영되므로, UI의 일관성을 유지할 수 있습니다.
• 효율적인 렌더링
  • 실제 DOM 업데이트가 이루어지는 이 단계에서는 React가 최소한의 변경만을 적용하여 성능을 극대화합니다.
  • 이는 사용자 인터페이스의 부드러운 전환과 빠른 반응성을 보장합니다.

---

🔍 Fiber가 UX를 어떻게 개선할까?

1️⃣ 부드러운 애니메이션

• Fiber는 렌더링 작업을 브라우저의 애니메이션 프레임(약 16ms)에 맞춰 조정하여, 애니메이션이 매끄럽게 진행되도록 합니다.
• 이를 통해 사용자는 애니메이션이 끊김 없이 흐르는 것처럼 느끼며, 시각적으로 더 쾌적한 경험을 제공합니다.
• Fiber의 중단 가능한 렌더링 특성 덕분에, 긴 렌더링 작업 중에도 애니메이션이 우선적으로 처리되어 사용자에게 원활한 시각적 피드백을 제공합니다.

2️⃣ 사용자 상호작용 우선

• Fiber는 사용자의 클릭, 입력 이벤트, 스크롤 등의 상호작용을 최우선으로 처리합니다.
• 이로 인해 애플리케이션은 즉각적으로 반응하며, 사용자는 대기 시간 없이 즉시 피드백을 받을 수 있습니다.
• 이러한 빠른 반응성은 사용자 만족도를 높이고, 더 나아가 애플리케이션에 대한 신뢰감을 구축하는 데 큰 역할을 합니다.

3️⃣  대규모 애플리케이션에서의 효율성

• Fiber는 복잡한 UI에서도 필요한 업데이트만 선택적으로 처리하여 성능을 극대화합니다.
• 이는 특히 데이터가 많고 복잡한 구조를 가진 대규모 애플리케이션에서 두드러지며, 불필요한 DOM 업데이트를 줄여 애플리케이션의 전체적인 성능을 향상시킵니다.
• Fiber의 세밀한 작업 단위 처리 및 우선순위 기반 렌더링 덕분에, 사용자는 느린 성능이나 지연 없이 매끄러운 사용자 경험을 즐길 수 있습니다.

---

🛠️ React Fiber 실전 예제

React Fiber는 기본적으로 React 내부에서 동작하기 때문에 특별히 설정할 필요는 없습니다. 하지만 Fiber의 동작을 간접적으로 체감할 수 있는 사례를 살펴봅시다

 

1. 긴 리스트 렌더링 최적화

import React, { useState } from 'react';

function LongList() {
  const [items] = useState([...Array(10000).keys()]);

  return (
    <ul>
      {items.map((item) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

export default LongList;

 

위와 같은 대규모 리스트를 렌더링할 때, React Fiber는 렌더링 작업을 잘게 나누어 UI가 멈추지 않도록 처리합니다.

 

Fiber의 동작 체감하기

• 중단 가능한 렌더링
  • 긴 리스트를 렌더링하면서 사용자가 스크롤을 하더라도, Fiber는 현재 렌더링 작업을 중단하고 스크롤 이벤트를 우선 처리할 수 있습니다.
  • 이를 통해 사용자는 리스트를 스크롤하는 동안에도 애플리케이션이 응답하고 있다는 느낌을 받을 수 있습니다
• 작업 단위 처리
  • 리스트의 각 항목은 독립적으로 처리되므로, React는 렌더링 작업을 여러 프레임에 나누어 수행할 수 있습니다.
  • 이로 인해 전체 렌더링이 느려지지 않고, 사용자는 리스트를 보는 데 있어 매끄러운 경험을 누릴 수 있습니다.

추가 예제: 가상 스크롤(Virtual Scrolling)

리스트가 너무 길어질 경우, 성능을 더욱 개선하기 위해 가상 스크롤을 구현할 수 있습니다. 가상 스크롤은 사용자가 화면에 보이는 항목만 렌더링하여 성능을 극대화합니다.

import React, { useState, useEffect } from 'react';

const ITEM_HEIGHT = 35; // 각 항목의 높이

function VirtualList() {
  const [items] = useState([...Array(10000).keys()]);
  const [scrollY, setScrollY] = useState(0);

  const handleScroll = (event) => {
    setScrollY(event.target.scrollTop);
  };

  const startIndex = Math.floor(scrollY / ITEM_HEIGHT);
  const endIndex = startIndex + Math.ceil(window.innerHeight / ITEM_HEIGHT);

  return (
    <div style={{ height: '100vh', overflowY: 'auto' }} onScroll={handleScroll}>
      <ul>
        {items.slice(startIndex, endIndex).map((item) => (
          <li key={item} style={{ height: ITEM_HEIGHT }}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default VirtualList;

 

이 예제는 스크롤 이벤트에 따라 화면에 보이는 항목만 렌더링하여 성능을 최적화합니다.

Fiber는 이러한 방식으로도 효과적으로 작업을 처리하여, 사용자에게 부드러운 경험을 제공합니다!

---

🚧 React Fiber의 한계

1️⃣ 브라우저와의 협력 필요

• Fiber는 브라우저의 여유 시간(Idle Time)을 활용하여 작업을 수행합니다. 이는 성능을 최적화하는 데 유리하지만, 브라우저의 이벤트 루프와의 협력이 필수적입니다.
• 만약 브라우저가 바쁜 상태(예: 긴 JavaScript 실행, 복잡한 CSS 애니메이션 등)라면 Fiber의 렌더링 작업이 지연될 수 있습니다. 이로 인해 UI 업데이트가 늦어지거나, 사용자 경험이 저하될 수 있습니다.
• 특히, 성능이 중요한 애플리케이션에서는 이러한 브라우저의 상태를 고려하여 코드 최적화와 이벤트 처리를 신중하게 설계해야 합니다.

2️⃣ 학습 곡선

• Fiber의 동작 방식을 깊이 이해하려면 시간이 필요할 수 있습니다. Fiber는 이전의 React 구조와는 다른 개념을 기반으로 하므로, 새로운 개발자나 기존 React 개발자 모두에게 학습 곡선이 존재합니다.
• 특히, 중단 가능한 렌더링, 작업 단위 처리, 우선순위 기반 렌더링 등의 개념을 완전히 이해하고 활용하기 위해서는 경험이 필요합니다.
• 이러한 복잡성으로 인해, 초보자에게는 진입 장벽이 높아질 수 있으며, 효과적으로 Fiber를 활용하기 위해서는 실전 경험이 중요합니다.

🌷 전설의 개발자가 되어봅시당! 🌷