React Fiber 파헤치기

React Fiber 와 VDOM 의 차이점

Fiber Node의 구조

type Fiber = {
  // 인스턴스 관련 항목
  tag: WorkTag,
  key: null | string,
  type: any,

  // 가상 스택 관련 항목
  return: Fiber | null,
  child: Fiber | null,
  sibling: Fiber | null,

  // 이펙트 관련 항목
  flags: Flags,
  nextEffect: Fiber | null,
  firstEffect: Fiber | null,
  lastEffect: Fiber | null,
  alternate: Fiber | null,
};

인스턴스 관련 항목

• tag: Fiber Node가 대변하는 요소의 유형, 0 ~ 25

  Tag 종류

• key: Fiber Node가 가리키는 고유 식별자

• type: 컴포넌트의 경우 해당 인스턴스를 만드는 함수 혹은 클래스. HTML 요소일 경우 div 와 같은 DOM 요소를 나타내는 문자열

key 와 type 은 재조정 과정에서 해당 Fiber Node의 정체성을 보존할지 새롭게 만들지 식별하기 위해 사용됩니다. 새로운 Fiber Node가 만들어지는 시점에는 해당 인스턴스의 실제 key, type을 그대로 복사해와서 사용합니다.

React의 Fiber가 나오기 전 과거 방식

Fiber가 나타나기 전에는 React Element가 VDOM Node를 생성하고 조정자를 통해서 실제 돔 노드로 변환했습니다. 이는 스택 재조정자를 사용해 동기적인 프로세스로 동작해서 렌더링할 화면이 많아지거나 동작이 많아지면 느려지게 됩니다.

1. 상태 변화
2. Component Tree 리렌더링 발생
3. 렌더링과 관련된 것들 Call Stack에 넣기
4. 새로운 VDOM으로 만들어짐
5. Diffing 알고리즘을 통해서 Current VDOM으로 만들기

Fiber는 어떻게 비동기로 동작하는가

Fiber에서는 우선순위 큐와 스케줄링을 통해서 비동기적으로 동작하게 만들어서 특정 시간동안 작업하고 수시로 멈춰서 우선순위가 더 높은 동작이 있다면 해당 동작을 먼저 실행하게 합니다.

변경 사항과 같은 Effect 정보들을 모아서 workInProgressTree를 완성했다면 실제 DOM에 반영하기 위해 Commit 단계에 진입합니다. 해당 작업은 동기적으로 동작하기 때문에 중간에 멈추거나 취소할 수 없습니다.

Commit 단계에 들어가기 전의 작업이 여러 프레임에 걸쳐서 실행되어도 실제로 사용자에게 보이는 장면은 Commit이 되고난 후이기 때문에, fiber 관련 작업이 일시정지 되거나 취소되어도 화면에는 영향을 끼치지 않습니다.

해당 프로세스 과정을 통해서 Error Boundary, Suspense, React.lazy 와 같은 기술들이 생겨났다고 하는 것 같은데 어떤 느낌인지 감은 오는 것 같다..

최초 업데이트 직후에 일어나는 일

• 최상단 노드를 workInProgress로 설정하고 beginWork를 실행합니다.
• 변경 사항이 생긴다면 해당 노드의 child 노드를 workInProgress로 설정합니다.
• child 노드가 없을때까지 반복하고 sibling 노드가 있다면 똑같이 진행합니다.
• sibling 노드까지 실행이 완료되면 부모 노드에게 return을 보냅니다.