🎈 Chapter 4: 재조정 (reconciliation)

재조정 이해하기

일괄 처리

리액트는 재조정 과정에서 여러 가상 DOM 업데이트를 모아 한 번의 DOM 업데이트로 결합한 후 실제 DOM에 대한 업데이트를 일괄 처리합니다. 이렇게 하면 실제 DOM을 업데이트하는 횟수가 줄어 웹 애플리케이션의 성능이 개선됩니다.

function Example() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount((prevCount) => prevCount + 1);
    setCount((prevCount) => prevCount + 1);
    setCount((prevCount) => prevCount + 1);
  }

  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={handleClick}>증가</button>
    </div>
  )
}

리액트는 일괄 업데이트를 수행하기 때문에 count + 1을 따로 실행해 DOM을 세 번 업데이트하는 대신 count + 3로 DOM을 한 번만 업데이트합니다.

기존 기술

스택 재조정자

스택 재조정자는 작업을 일시 중지하거나 연기하지 않고 순차적으로 변경 사항을 렌더링합니다.
계산 비용이 비싼 컴포넌트가 렌더링을 막아 버리면 사용자 입력이 눈에 띄가 버벅거리며 화면에 표시됩니다. 스택 재조정자는 업데이트의 우선순위를 설정하지 않습니다. 그래서 덜 중요한 업데이트가 더 중요한 업데이트를 방해할 수 있었습니다.

파이버 재조정자

파이버 재조정에는 조정자를 위한 작업 단위를 나타내는 파이버라는 데이터 구조가 사용됩니다. 파이버는 리액트 엘리먼트에서 생성되는데, 핵심적인 차이점은 파이버는 상태를 저장하고 수명이 긴 반면 리액트 엘리먼트는 임시적이고 상태가 없다는 것입니다.

데이터 구조러서의 파이버

파이버 재조정자는 업데이트의 우선순위를 정하고 이에 따라 동시 실행을 가능케 해서 리액트 애플리케이션의 성능과 응답성을 향상시킵니다. 파이버 데이터 구조는 변경 가능한 인스턴스로 설계되었으며 조정 과정에서 필요에 따라 업데이트되고 재배치됩니다.
파이버 재조정에는 현재 파이버 트리와 다음 파이버 트리를 비교해 어느 노드를 업데이트, 추가, 제거할지 파악하는 작업이 포함됩니다.

조정 과정 중에 파이버 재조정자는 가상 DOM의 각 리액트 엘리먼트에 대해 파이버 노드를 생성합니다. 파이버 노드가 생성되면 파이버 재조정자는 작업 루프(work loop)를 사용해 사용자 인터페이스를 업데이트합니다. 작업 루프는 루프 파이버 노드에서 시작해 컴포넌트 트리를 따라 내려가면서 업데이트가 필요한 경우 각 파이버 노드를 "더티"로 표시합니다. 끝에 도달하면 다시 반대로 순회하면서 브라우저의 DOM 트리와는 분리된 새 DOM 트리를 메모리에 생성합니다. 새 DOM 트리는 이후 회면에 반영됩니다.
이 작업은 두 가지 함수로 표현할 수 있습니다. beginWork(작업 시작)는 위에서 아래로 이동하며 컴포넌트를 "업데이트가 필요함"으로 표시하고, completeWork(작업 완료)는 다시 위로 이동하며 브라우저에서 분리된 실제 DOM 엘리먼트의 트리를 메모리에 구성합니다. 이러한 오프스크린 렌더링 프로세스는 사용자가 볼 수 없으므로 언제든지 중단하고 버릴 수 있습니다.

더블 버퍼링

더블 버퍼링은 컴퓨터 그래픽 및 비디오 처리에서 깜박임을 줄이고 체감 성능을 개선하는 기술입니다. 이 기술은 이미지나 프레임을 저장하기 위한 두 개의 버퍼(또는 메모리 공간)를 생성하고 일정 간격으로 두 버퍼를 전환해 최종 이미지나 동영상을 표시합니다.

파이버 재조정은 더블 버퍼링과 비슷합니다. 업데이트가 발생하면 현재 파이버 트리가 포크되어 주어진 사용자 인터페이스의 새로운 상태를 반영하도록 업데이트됩니다. 이를 렌더링이라고 합니다. 그 후 현재 트리를 대체할 트리가 준비되고 사용자가 기대하는 상태를 정확하게 반영하면, 더블 버퍼링에서 비디오 버퍼를 교체하는 것처럼 현재 파이버 트리와 교체됩니다. 이를 재조정의 커밋 단계 또는 커밋이라고 합니다.

파이버 재조정자를 사용하면 JSX 엘리먼트의 사용자 정의 트리에서 두 가지 트리가 만들어집니다. "현재" 파이버를 포함하는 트리와 작업용 파이버를 포함하는 트리입니다.

파이버 재조정

파이버 재조정은 렌더링 단계와 커밋 단계로 이루어집니다. 리액트는 렌더링 작업을 수행하고 이를 DOM에 커밋해서 사용자에게 보여 주기 전에 언제든 폐기할 수 있게 되었습니다. 렌더링 중단이 가능해진 것입니다. 렌더링이 중단 가능한 듯 보이는 이유는 리액트 스케줄러가 5밀리초마다 실행을 메인 스레드로 돌려주기 때문입니다.

렌더링 단계

렌더링 단계는 현재 트리에서 상태 변경 이벤트가 발생하면 시작합니다. 리액트는 각 파이버를 재귀적, 단계적으로 순회하고 업데이트가 보류 중이라는 신호 플래그를 설정해 대체 트리에 오프스크린 변경 작업을 수행합니다.

beginWork(작업 시작)

beginWork는 작업용 트리에 있는 파이버 노드의 업데이트 필요 여부를 나타내는 플래그를 설정합니다. 여러 플래그를 설정하고 계속해서 다음 파이버 노드로 이동하며 트리의 맨 아래에 도달할 때까지 동일한 작업을 수행합니다. 이 작업이 완료되면 파이버 노드에서 completeWork를 호출하고 다시 거슬러 올라가며 순회합니다.

completeWork(작업 완료)

completeWork 함수는 작업용 파이버 노드에 업데이트를 적용하고 애플리케이션의 업데이트된 상태를 나타내는 실제 DOM 트리를 새롭게 생성합니다. 이 작업을 통해 DOM에서 분리된 트리를 브라우저가 시각적으로 표현하는 영역 바깥에 구성합니다. 이 엘리먼트 트리가 아직 브라우저 내 문서에 추가되지 않은 상태인 것에 유의하세요. 리액트는 화면 밖에서 다음에 보여 줄 UI를 만들었을 뿐입니다. 화면 밖에서 이 작업을 수행하면 중단할 수 있습니다. 리액트가 계산하는 다음 상태는 아직 화면에 그려지지 않았으므로, 만약 우선순위가 더 높은 업데이트가 예약되면 여기서 만들어진 UI는 버려질 수 있습니다.

beginWork가 파이버 노드에서 "업데이트가 필요함" 상태에 대한 플래그 생성 역할을 한다면, completeWork는 호스트 환경에 커밋할 새 트리를 구성하는 역할을 합니다.

커밋 단계

커밋 단계는 렌더링 단계에서 가상 DOM에 적용된 변경 사항을 실제 DOM에 반영합니다. 커밋 단계에서는 새 가상 DOM 트리가 호스트 환경에 커밋되고 작업용 트리가 현재 트리로 바뀝니다.
커밋 단계는 변현 단계와 레이아웃 단계로 나뉩니다.

변형 단계

변형 단계는 커밋 단계의 첫 부분으로, 가상 DOM에 적용된 변경 사항을 실제 DOM에 반영합니다. 이 단계에서 리액트는 적용할 업데이트를 식별하고 commitMutationEffects라는 특수 함수를 호출합니다. 이 함수는 렌더링 단계에서 작업용 트리의 파이버 노드에 적용된 업데이트를 실제 DOM에 반영합니다.

레이아웃 단계

커밋 단게의 둘재 부분으로, DOM에서 업데이트된 노드의 새 레이아웃을 계산합니다. 이 단계에서 리액트는 commitLayoutEffects라는 특수 함수를 호출합니다. 이 함수는 DOM에서 업데이트된 노드의 새 레이아웃을 계산합니다.
레이아웃 단계가 완료되면, 리액트는 렌더링 단계에서 가상 DOM에 적용되었던 변경 사항을 실재 DOM에 성공적으로 반영하게 됩니다.

화면에 모두 표시하기

리액트는 현재 트리나 작업용 트리 중 하나 위에 FiberRootNode를 둡니다. FiberRootNode는 재조정 과정의 커밋 단계를 관리하는 핵심 데이터 구조입니다.
가상 DOM이 업데이트되면 리액트는 현재 트리를 변경하지 않은 채 작업용 트리를 업데이트합니다. 이를 통해 애플리케이션의 현재 상태를 유지하면서 가상 DOM을 계속 렌더링하고 업데이트할 수 있습니다.
렌더링 프로세스가 완료되면 리액트는 commitRoot 함수를 호출해 작업용 트리에 적용된 변경 사항을 실제 DOM에 커밋합니다. commitRoot는 FiberRootNode의 포인터를 현재 트리에서 작업용 트리로 전환하고, 작업용 트리를 새로운 현재 트리로 만듭니다.

이 시점부터 향후 모든 업데이트는 새로운 현재 트리 기반으로 이루어집니다. 이 과정을 통해서 애플리케이션이 일관된 상태를 유지하고, 업데이트를 정확하고 효율적으로 적용할 수 있습니다. 그리고 이 모든 작업은 즉시 브라우저에 반영됩니다.