Reference!

velog @eunseo9808

naver React 파이버 아키텍처 분석

medium @Yeji Lee (Bailey)

ChatGPT 4o

개요

React는 UI 효율적인 업데이트를 위해 Virtual DOM 개념을 도입합니다. VDOM은 브라우저의 실제 DOM을 추상화한 메모리 내 객체트리입니다. 앱의 상태가 바뀌면 React는 새로운 VDOM 트리를 생성하고 이전 VDOM과 비교(diff)하여 바뀐 부분만 체크합니다. 이 과정을 재조정(Reconciliation) 이라고 하며, 변경 사항만 부분적으로 실제 DOM에 적용(Commit) 합니다.

VDOM은 내부적으로 Fiber 노드로 구성되어있고, Fiber 노드는 React의 효율적인 업데이트를 가능하게 합니다.

전체 흐름

상태 업데이트 setState() 호출

function handleClick() {
  setCount(c => c + 1);
  setFlag(f => !f);
}

두 개의 상태 업데이트는 batch되어 하나로 묶여서 상태 업데이트됩니다.

🙋🏻❓비동기 컨텍스트에서의 상태 업데이트는요?

React 18 이전에는 비동기 컨텍스트(예: setTimeout, Promise 콜백 등)에서 발생하는 상태 업데이트는 자동으로 batch 되지 않았습니다. 그러나 React 18부터는 이러한 비동기 컨텍스트에서도 상태 업데이트가 자동으로 배치됩니다

setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
}, 1000);

🙋🏻❓이럴 경우는요?

function handleClick() {
  setCount(c => c + 1);
  setFlag(f => !f);

  setTimeout(() => {
    setCount(c => c + 1);
    setFlag(f => !f);
  }, 1000);
}

클릭 시: 1번 렌더
1초 후: 1번 렌더

2번의 리렌더링만 일어납니다

Lane 결정 (우선순위 지정)

이벤트 컨텍스트에 따라 적절한 Lane 할당 하는 작업

React는 총 31개의 레인이 있고, 단위는 Bit입니다. 가장 빠른 SyncLane부터 가장 느린 IdleLane까지 존재합니다.

export const TotalLanes = 31;

export const NoLanes: Lanes = /*                        */ 0b0000000000000000000000000000000;
export const NoLane: Lane = /*                          */ 0b0000000000000000000000000000000;

export const SyncHydrationLane: Lane = /*               */ 0b0000000000000000000000000000001;
export const SyncLane: Lane = /*                        */ 0b0000000000000000000000000000010;

export const InputContinuousHydrationLane: Lane = /*    */ 0b0000000000000000000000000000100;
export const InputContinuousLane: Lane = /*             */ 0b0000000000000000000000000001000;

export const DefaultHydrationLane: Lane = /*            */ 0b0000000000000000000000000010000;
export const DefaultLane: Lane = /*                     */ 0b0000000000000000000000000100000;

export const SyncUpdateLanes: Lane = /*                */ 0b0000000000000000000000000101010;

const TransitionHydrationLane: Lane = /*                */ 0b0000000000000000000000001000000;
const TransitionLanes: Lanes = /*                       */ 0b0000000011111111111111110000000;
const TransitionLane1: Lane = /*                        */ 0b0000000000000000000000010000000;
const TransitionLane2: Lane = /*                        */ 0b0000000000000000000000100000000;
const TransitionLane3: Lane = /*                        */ 0b0000000000000000000001000000000;
const TransitionLane4: Lane = /*                        */ 0b0000000000000000000010000000000;
const TransitionLane5: Lane = /*                        */ 0b0000000000000000000100000000000;
const TransitionLane6: Lane = /*                        */ 0b0000000000000000001000000000000;
const TransitionLane7: Lane = /*                        */ 0b0000000000000000010000000000000;
const TransitionLane8: Lane = /*                        */ 0b0000000000000000100000000000000;
const TransitionLane9: Lane = /*                        */ 0b0000000000000001000000000000000;
const TransitionLane10: Lane = /*                       */ 0b0000000000000010000000000000000;
const TransitionLane11: Lane = /*                       */ 0b0000000000000100000000000000000;
const TransitionLane12: Lane = /*                       */ 0b0000000000001000000000000000000;
const TransitionLane13: Lane = /*                       */ 0b0000000000010000000000000000000;
const TransitionLane14: Lane = /*                       */ 0b0000000000100000000000000000000;
const TransitionLane15: Lane = /*                       */ 0b0000000001000000000000000000000;
const TransitionLane16: Lane = /*                       */ 0b0000000010000000000000000000000;

const RetryLanes: Lanes = /*                            */ 0b0000111100000000000000000000000;
const RetryLane1: Lane = /*                             */ 0b0000000100000000000000000000000;
const RetryLane2: Lane = /*                             */ 0b0000001000000000000000000000000;
const RetryLane3: Lane = /*                             */ 0b0000010000000000000000000000000;
const RetryLane4: Lane = /*                             */ 0b0000100000000000000000000000000;

export const SomeRetryLane: Lane = RetryLane1;

export const SelectiveHydrationLane: Lane = /*          */ 0b0001000000000000000000000000000;

const NonIdleLanes: Lanes = /*                          */ 0b0001111111111111111111111111111;

export const IdleHydrationLane: Lane = /*               */ 0b0010000000000000000000000000000;
export const IdleLane: Lane = /*                        */ 0b0100000000000000000000000000000;

export const OffscreenLane: Lane = /*                   */ 0b1000000000000000000000000000000;

업데이트 객체(update) 생성

Update는 상태 변경을 나타내는 객체로, 다음과 같은 속성들을 포함합니다.

{
...
  lane: Lane,                // 우선순위
  action,          				// prev => prev + 1
  next: Update | null    // 다음 업데이트
  ...
}

updateQueue에 push

updateQueue 는 다음과 같이 구성되어있습니다.

{
  baseState: any,            // 현재 상태
  firstBaseUpdate: Update | null, // 첫 번째 업데이트
  lastBaseUpdate: Update | null,  // 마지막 업데이트
  shared: {
    pending: Update | null   // 대기 중인 업데이트
  },
  effects: Array<Update> | null // 부수 효과를 위한 업데이트 목록
}

이 객체는 해당 컴포넌트의 Fiber.updateQueue.shared.pending에 push됩니다.

이후 React는 scheduleUpdateOnFiber()를 호출해 작업 예약을 수행합니다.

Render Phase

React는 상태 변경 감지 후, Fiber 기반의 Render Phase를 수행합니다.

(최초 업데이트 시)HostRoot fiber 복제

지금 root.current 에 있는 fiber를 복제하여 workInProgress fiber로 지정

workLoop 호출

workLoopConcurrent() 모든 일의 반복

현재 작업이 남아있는 fiber가 존재하고, scheduler가 작업을 허락하는 동안 반복적으로 작업을 수행하는 Loop를 돌립니다.

function workLoopConcurrent() {
  while (workInProgress !== null && !shouldYield()) {
    performUnitOfWork(workInProgress);
  }
}

function performUnitOfWork(unitOfWork: Fiber): void {
  const current = unitOfWork.alternate;
	const next = beginWork(current, unitOfWork, renderLanes);
  if (next === null) {
    completeUnitOfWork(unitOfWork);
  } else {
    workInProgress = next;
  }
}

performUnitWork에서는 다음으로 처리할 fiber가 남아있는 이상 계속 beginWork()를 호출하고 다음 작업할 fiber를 workInProgress 에 할당합니다.

beginWork() 들어가서 하는 일

해당 fiber의 인풋 값이 current 트리에 있는 fiber의 프롭과 비교했을 때 변경되었나를 확인하고, (변경된 것이 없으면 fiber를 업데이트해줄 필요가 없으므로) workInProgress fiber의 tag 값에 따라 해당 fiber 를 업데이트해주고 다음 작업 fiber 를 반환하는 함수를 호출합니다.

이렇게 beginWork() 가 반환하는 child fiber가 다음 workInProgress가 되고, workLoop은 다음 fiber 가 없을 때까지 계속 beginWork() 작업을 반복하며 workInProgress fiber를 업데이트시켜줍니다. 위 updateFragment의 예를 보면, 마지막 줄의 workInProgress.child 가 null 인 경우에, performUnitOfWork에서의 next 값이 null이 될 것이고, 비로소 completeUnitOfWork() 가 실행됩니다.

completeUnitOfWork() 돌아 나오는 일의 흐름 제어

completeUnitOfWork가 호출되었다는 것은 지금 workInProgress fiber의 하위로 더 이상 처리할 fiber가 없다는 의미입니다. 우선 해당 fiber를 완료 처리하고 completeWork를 호출합니다. (이 작업은 아래에서 더 설명하겠습니다) 만약에 completeWork를 호출하면서 다음으로 처리할 fiber가 생겨버렸다면 (예. 상태 변화로 인해 해당 요소 아래로 child가 생성된다면) 또다시 workInProgress 값에 할당해주고 completeUnitOfWork를 그대로 종료합니다. 흐름의 제어는 다시 performUnitOfWork로 돌아갑니다. 혹은 sibling fiber가 있다면 이를 workInProgress 값에 할당해주고, 마찬가지로 performUnitOfWork 에게 제어가 넘어갑니다.

더 이상 처리할 child 도 sibling 도 없다면 해당 fiber의 return fiber로 돌아가서 마찬가지로 방금 completeUnitOfWork 의 do whlie 룹에서 했던 작업을 반복합니다. 이 작업은 completedWork이 없을 때까지, 그러니까 return fiber가 없을 때까지 계속합니다. 마지막으로 루트에 완료 표시를 해줍니다.

`completeWork()` 돌아 나오면서 하는 일

beginWork와 마찬가지로, 해당 fiber의 tag 값에 따라 조금씩 다른 작업을 하게 됩니다. 아래 코드에서 보이는 bubbleProperties는 해당 fiber의 모든 children의 flag 와 lane 정보를 머징해주는 작업이라고 볼 수 있을 것 같습니다. (lane 에 대해서는 이 글에서는 자세히 다루지 않아서 더 명확히 이해하려면 소스 코드를 탐방하실 것을 추천드립니다)

completeUnitOfWork 에서 마지막으로 루트에 완료 표시까지 했다면 이펙트 정보를 포함한 새로운 fiber 트리가 완성된 것입니다.

commit phase

work-in-progress 루트의 exitStatus 가 RootCompleted되면 비로소 commitWork가 호출됩니다. 완성된 fiber 트리에 유효한 effect flag 값이 있다면, commitMutationEffects, resetAfterCommit, commitLayoutEffects, requestPaint 같은 작업을 실행해서 화면에 fiber 트리를 flush 해주고 루트의 current 포인터를 바꿔줍니다. 기존에 있던 current 트리는 새로 지정된 current의 alternate 로 재활용됩니다. 이 작업은 workLoopConcurrent의 일환이 아니므로 동기적으로 한 큐에 실행됩니다.

❗️Fiber와 ReactElement의 관계

JSX는 컴파일 타임에 React.createElement() 로 변환되며, 이 함수가 실행되는 건 render phase 도중 beignWork() 안에서 컴포넌트가 호출 될 때입니다.

ReactElement 구조

{
  "type": Container,
  "props": {
    "children": {
      "type": Title,
      "props": {
        "text": "Hello~!",
        "children": null
      },
      "key": null,
      "ref": null
    }
  },
  "key": null,
  "ref": null
}

생성된 ReactElement는 createFiberFromElement()를 통해 Fiber 노드로 변환됩니다.

createFibberFromElement
createFiberFromTypeAndProps
createFiber

FiberNode 구조

function FiberNode(
  this: $FlowFixMe,
  tag: WorkTag,
  pendingProps: mixed,
  key: null | string,
  mode: TypeOfMode,
) {
  // Instance
  this.tag = tag; /* ReactFiberFlags 의 Tag 가 부착 */
  this.key = key;
  this.elementType = null;
  this.type = null;
  this.stateNode = null;

  // Fiber
  this.return = null;
  this.child = null;
  this.sibling = null;
  this.index = 0;

  this.ref = null;
  this.refCleanup = null;

  this.pendingProps = pendingProps;
  this.memoizedProps = null;
  this.updateQueue = null;
  this.memoizedState = null;
  this.dependencies = null;

  this.mode = mode;

  // Effects
  this.flags = NoFlags;
  this.subtreeFlags = NoFlags;
  this.deletions = null;

  this.lanes = NoLanes;
  this.childLanes = NoLanes;

  this.alternate = null;

  if (enableProfilerTimer) {
    this.actualDuration = Number.NaN;
    this.actualStartTime = Number.NaN;
    this.selfBaseDuration = Number.NaN;
    this.treeBaseDuration = Number.NaN;
    this.actualDuration = 0;
    this.actualStartTime = -1;
    this.selfBaseDuration = 0;
    this.treeBaseDuration = 0;
  }
}

ReactElement 보다 더 많은 프로퍼티들을 갖고있는 것을 볼 수 있다.

인스턴스 관련

tag : 컴포넌트/요소 인스턴스 유형 (WorkTag)
key : 인스턴스의 고유한 식별자, Array.map 각 item 에 붙여주는 고유한 key와 같은 값
type : 인스턴스를 만드는 함수/클라스 (컴포넌트), DOM 요소 “div”,"main" (HTML요소), null (root fiber)

가상 스택 관련

return : 부모 fiber, 현 fiber의 작업 처리가 완료되면 돌아갈 fiber를 가리킴
child : 첫 자식 fiber, 첫 자식 fiber에 대한 포인터
sibling : 현 fiber의 형제 fiber, child fiber가 없다면 sibing fiber를 다음으로 이어서 탐색함

return, chlid, sibling 포인터들을 사용하면 linked list로 탐색하는 게 가능

이벤트 관련

flags : Effect, 바뀐점, 바이너리로 할당된 값

export type Flags = number;

// Don't change these values. They're used by React Dev Tools.
export const NoFlags = /*                      */ 0b0000000000000000000000000000;
export const PerformedWork = /*                */ 0b0000000000000000000000000001;
export const Placement = /*                    */ 0b0000000000000000000000000010;
export const DidCapture = /*                   */ 0b0000000000000000000010000000;
export const Hydrating = /*                    */ 0b0000000000000001000000000000;

// You can change the rest (and add more).
export const Update = /*                       */ 0b0000000000000000000000000100;
/* Skipped value:                                 0b0000000000000000000000001000; */

export const ChildDeletion = /*                */ 0b0000000000000000000000010000;
export const ContentReset = /*                 */ 0b0000000000000000000000100000;
export const Callback = /*                     */ 0b0000000000000000000001000000;
/* Used by DidCapture:                            0b0000000000000000000010000000; */

export const ForceClientRender = /*            */ 0b0000000000000000000100000000;
export const Ref = /*                          */ 0b0000000000000000001000000000;
export const Snapshot = /*                     */ 0b0000000000000000010000000000;
export const Passive = /*                      */ 0b0000000000000000100000000000;
/* Used by Hydrating:                             0b0000000000000001000000000000; */

export const Visibility = /*                   */ 0b0000000000000010000000000000;
export const StoreConsistency = /*             */ 0b0000000000000100000000000000;
...

🙋🏻❓왜 바이너리 형태로 저장할까?

Flag 를 비트연산자로 관리하면 Flag 에서 특정한 작업이 있는지를 빠르게 확인/제거 할 수 있기 때문이다.

🙋🏻❓왜 그럼 Flag 들을 저장하고 있는 것이 어떤 도움이 될까 ?

컴포넌트에 re-render 가 일어나 Virtual DOM 을 새로 생성 할 때 Virtual DOM 을 순회하며 업데이트가 일어날 노드의 Flag 에 일어날 업데이트들을 추가하고 부모 노드의 subtreeFlag 에도 같은 업데이트들을 추가한다. 이렇게 설정된 Flag 들은 추후 commit phase 에서 actual DOM 에 변화를 줄 때 브라우저상에 렌더링 될 항목들을 결정하는 지표가 된다. 또 부모 노드에서 자식 노드들의 작업 단위를 subtreeFlags 로 관리함으로서 Virtual DOM 을 순회 할 때 순회하지 않아도 될 항목을 불필요하게 순회 할 필요가 없게 만든다.

nextEffect : reconciliation 과정에서 새로운 변경 사항 혹은 Effect가 생겼을 때, 이전 Effect가 발생했던 fiber 의 nextEffect가, 이 새로운 Effect를 가진 fiber를 가리킴. 전체 트리 비교가 끝나면 루트 fiber의 firstEffect부터 시작해서 nextEffect 포인터를 따라가면 변화가 생긴 fiber만 빠르게 탐색 가능
firstEffect, lastEffect : 이 fiber 하위에 있는 서브 트리에서의 첫 이펙트를 가진 fiber 와 마지막 이펙트를 가진 fiber 를 가리킴.
alternate : 해당 fiber의 교대 fiber

reconciliation 이 마치고 변경된 사항이 commit phase 를 통해서 화면까지 반영이 되면, 현재 앱 상태의 current VDOM fiber를 flushed fiber라고 부르고, 작업 중인 상태/화면에 반영되지 않은 fiber를 workinProgress fiber라고 부릅니다.flushed fiber의 alternate 는 workInProgress fiber를 가리키고, workInProgress fiber 의 alternate 는 flushed fiber를 가리킵니다.

React 렌더링 원리 정리: Virtual DOM, Fiber, Lane, 업데이트 흐름