React Fiber

Fiber는 React의 새로운 구조로, 애플리케이션의 렌더링 과정을 효율적으로 처리하기 위해 도입되었다. Fiber는 기본적으로 작업 단위를 뜻하며, 각 React 요소에 대한 정보를 포함한다. 예를 들어, 요소의 타입, 상태, 속성 등이 포함된다.

const fiber = {
  type, // 요소의 타입
  key, // 요소의 고유 키
  parent, // 부모 Fiber
  child, // 첫 번째 자식 Fiber
  sibling, // 형제 Fiber
  stateNode, // 요소의 상태 노드 (예: DOM 노드, 클래스 인스턴스 등)
  // ... 기타 필드들
};

Fiber의 몇 가지 특징은 다음과 같다.

동시성과 증분 렌더링

Fiber는 증분 렌더링(incremental rendering)을 가능하게 한다. 즉, 렌더링 작업을 여러 개의 작은 단위로 나누고, 필요한 경우에만 작업을 수행하거나 중지할 수 있다. 이를 통해 렌더링 작업이 메인 스레드를 차단하지 않고, 원활한 사용자 경험을 제공할 수 있다.

Fiber는 이를 위해 일시정지 - 재가동 - 우선순위와 같은 상태를 갖는다.

참고할만한 포스팅

React Deep Dive - Fiber

우선순위 기반 스케줄링

React Fiber는 각 작업에 우선순위를 부여하여 스케줄링을 수행한다. 예를 들어, 사용자 이벤트와 관련된 작업은 비동기 작업보다 높은 우선순위를 갖는다. 이를 통해 중요한 작업이 먼저 수행되어 사용자 경험이 향상된다.

이중 버퍼링

React Fiber는 이중 버퍼링(double buffering) 기술을 사용한다. 즉, 가상 DOM의 두 개의 복사본을 유지하고, 작업이 완료되면 화면에 표시되는 버퍼와 작업 중인 버퍼를 교체한다. 이를 통해 화면이 갑자기 변경되는 것을 방지하고, 더 매끄러운 화면 전환을 제공할 수 있다.

Made with SlashPage