Virtual DOM

current 트리와 worklnProgress 트리의 최상단 노드를 current, worklnProgress로 명시하였지만 더 자세히는 Host root라는 이름의 노드입니다.

리액트는 VDOM을 더블 버퍼링 형태로 관리합니다. DOM에 마운트된 current 트리와 Render phase에서 작업 중인 worklnProgress 트리로 나뉘어 있습니다.

이 worklnProgress 트리는 Commit phase를 지나면 current 트리로 관리됩니다.

이렇듯 더블 버퍼링 형태이기 때문에 리액트는 worklnProgress에 작업을 하다가도 언제든지 버리고 처음부터 자시 작업하거나 또는 중지시켰다가 다시 시작하는 등 작업 우선순위에 맞게 유연하게 대처할 수 있기에 사용자 경험을 최우선적으로 고려할 수 있습니다.

• worklnProgress가 만들어지는 방식은 current에서 자기 복제하여 서로 번갈아 가면서(alternate) 참조하는 방식입니다.
• VDOM 노드(fiber)는 자식을 child로 참조하는데 first child만 참조합니다. 나머지 자식들은 이전 형제가 sibling 으로 참조하고 있습니다.
• 모든 자식은 부모를 return 으로 참조합니다.

Fiber

React element를 VDOM에 올려놓아야 합니다. 그 확장을 fiber가 해줍니다.

fiber는 VDOM 노드이며 컴포넌트가 살아 숨쉬기 위해 필요한 모든 정보를 관리하고 있습니다.

function FiberNode(tag, pendingProps, key){
  // Instance
  this.tag = tag; // fiber의 종류를 나타냄
  this.key = key;
  this.type = null; // 추후에 React element의 type을 저장
  this.stateNode = null; // 호스트 컴포넌트에 대응되는 HTML element를 저장

  // Fiber
  this.return = null; // 부모 fiber
  this.child = null; // 자식 fiber
  this.sibling = null; // 형제 fiber
  this.index = 0; // 형제들 사이에서의 자신의 위치

  this.pendingProps = pendingProps; // workInProgress는 아직 작업이 끝난 상태가 아니므로 props를 pending으로 관리
  this.memoizedProps = null; // Render phase가 끝나면 pendingProps는 memoizedProps로 관리
  this.updateQueue = null; // 컴포넌트 종류에 따라 element의 변경점 또는 라이프사이클을 저장
  this.memoizedState = null; // 함수형 컴포넌트는 훅을 통해 상태를 관리하므로 hook 리스트가 저장된다.

  // Effects
  this.effectTag = NoEffect; // fiber가 가지고 있는 side effect를 기록
  this.nextEffect = null; // side effect list 
  this.firstEffect = null; // side effect list
  this.lastEffect = null; // side effect list 

  this.expirationTime = NoWork; // 컴포넌트 업데이트 발생 시간을 기록
  this.childExpirationTime = NoWork; // 서브 트리에서 업데이트가 발생할 경우 기록

  this.alternate = null; // 반대편 fiber를 참조
}