개요

React Fiber

지난 포스팅에서 React Fiber란 무엇인지, 그 도입 배경과 Fiber를 통한 Reconciliation을 Render와 Commit 두 단계에 걸쳐서 알아보았다. 이를 통해 Fiber가 call Stack의 종속성으로부터 벗어나 React가 브라우저와 함께 작업들을 스케줄링할 수 있도록 하기 위해 도입 되었음을 알게 되었다.

이번 포스팅에서는 Fiber를 이용한 스케줄링에서 작업들의 우선순위를 어떻게 선정하고 스케줄링하는지를 알아보려한다.

Fiber 내에서의 우선순위

https://www.youtube.com/watch?v=ZCuYPiUIONs&t=1517s

React Conf 17과 React의 Contributor Toru Kobayashi의 포스팅에 따르면 React는 각 업데이트나 작업의 성격을 파악해 적절한 우선순위를 할당한다.

할당하는 우선 순위 라벨은 다음과 같이 enum으로 정의되어 있다.

ReactPriorityLevel {
  NoWork: 0, 
  SynchronousPriority: 1,
  AnimationPriority: 2,
  HighPriority: 3,
  LowPriority: 4,
  OffscreenPriority: 5,
};

// No work is pending.
// For controlled text inputs. Synchronous side-effects.
// Needs to complete before the next frame.
// Interaction that needs to complete pretty soon to feel responsive.
// Data fetching, or result from updating stores.
// Won't be visible but do the work in case it becomes visible.

• NoWork : 대기 중인 작업이 없음을 나타낸다.
• SynchronousPriority: 가장 높은 우선 순위로, 다른 작업을 중단하고서 즉시 실행된다.
  • 주로 사용자 입력과 관련된 작업이 해당된다.
• AnimationPriority: 다음 프레임(16ms) 전에 완료되어야 하는 작업에 사용
  • 주로 애니메이션이나 시각적 업데이트와 관련된 작업이 여기에 해당
  • RAF가 호출되어 해당 작업을 다음 프레임 전에 완료되도록 배치한다.
• HighPriority : 빠른 응답이 필요한 상호작용에 사용된다.
  • 버튼 클릭에 대한 반응이나 빠른 UI 업데이트가 해당된다.
• LowPriority : 즉각적인 응답이 필요하지 않은 배경 작업들
  • data fetching이나 상태 업데이트 결과와 같은 작업들에 사용
• OffscreenPriority : 현재 화면에 보이지 않는 컴포넌트의 업데이트에 사용
  • 사용자에게 즉시 보이지 않지만, 나중에 보일 수 있는 컨텐츠를 준비하는데 사용된다.

그러나 내가 참고했던 자료들이 17년, 18년도 자료여서 그런지는 몰라도, 실제 18 버전의 현 React 코드를 열어보았을 때는 같은 개념이 조금 다른 형태로 구성되어 있었다.

React v18 에서의 우선순위 스케줄링

React는 React element를 Fiber 노드로 만드는 과정에서 위의 우선순위를 할당하는데, Fiber 노드 내의 비트 필드인lanes , childlLanes 속성이 이에 관여한다. 해당 속성들은 우선순위 정보를 인코딩하는 데 사용된다.