React WorkLoop

1편에서 React 핵심 패키지 간의 의존성과 호출 관계를 그림을 그리며 소개했습니다. 개요도에는 2개의 WorkLoop를 볼 수 있는데, 각각 scheduler와 react-reconciler 패키지에 있습니다. 2편에서는 두 루프에 대해서 설명하려고 합니다.

이 글에선 두 루프는 각각 작업 스케줄 루프(Scheduler.js)와 fiber 구성 루프(ReactFiberWorkLoop.js)라고 표현하겠습니다. 자세한 소스 코드 분석은 scheduler의 스케줄링 매커니즘과 fiber 트리 구성에 관하여 다룰 때 설명하고, 거시적 관점에서 분석하겠습니다.

1. 작업 스케줄 루프와 Fiber 구성 루프

1.1 작업 스케줄 루프 (Scheduler workLoop)

작업 스케줄 루프는 React 앱이 동작하기 위한 핵심입니다. 반복적으로 호출되는 모든 작업(task)의 스케줄을 우선순위에 따라 제어합니다. 우선순위에 따라 expiration time이 결정되고, 이값을 기준으로 min-heap 정렬이 적용됩니다.

1.2 fiber 구성 루프 (fiber workLoop)

fiber 구성 루프는 fiber 트리의 구성을 제어하며, 전체 과정은 DFS(깊이 우선 탐색)으로 이루어집니다.

1.3 두 루프의 공통점, 차이점, 연관성

공통점

• 두 루프는 javaScript 소스 코드 상에서 실행 시점에서도 클로저 형태를 유지하고 있습니다. 내부에 정의된 전역 변수들은 해당 Scope의 private 변수이며 앱 실행을 제어하는 변수로 사용됩니다.

차이점

• 작업 스케줄 루프는 이진 힙 구조를 기반으로 힙의 루트 노드를 반복 실행하다가 힙이 비워질 때까지 계속 실행합니다. 스케줄링 기능만 하며, 내부 callback 함수의 기능은 무엇인지 알지 못합니다.

• fiber 작업 루프는 트리 구조 기반입니다. Root부터 DFS 알고리즘으로 child - sibling 순서로 끝까지 탐색하며 실행합니다. 스케줄 체크 뿐만 아니라, fiber 트리 구성과 DOM 렌더링의 구현 세부 사항에 가까운 task를 할당합니다.

연관성

• fiber 구성 루프는 작업 스케줄 루프에서 실행되는 task의 일부입니다. 둘은 종속 관계이고 각 작업마다 새로운 fiber 트리를 다시 구성합니다.

2. React 실행 흐름

위 설명한 내용처럼 두 개의 루프는 다음과 같은 분업 구조를 가집니다.

• 작업 스케줄 루프 : task를 스케줄링

• fiber 구성 루프 : task의 실제 실행 담당.

React 앱의 실행 흐름은 입력 -> 출력으로 변환하는 과정이 위 두 workLoop를 중심으로 이루어 집니다. 이를 다시 한번 순서대로 요약해보겠습니다.

1. 입력(Input) : DOM 노드의 업데이트(노드 추가, 삭제, 수정 등)를 목표로 하는 "업데이트 요구"라고 볼 수 있습니다.

2. 작업(Task) 등록 : react-reconciler는 "업데이트 요구"를 받으면 즉시 fiber 트리를 구성하지 않고 scheduler에 새 작업(task)를 등록합니다. 간단히 말해 "업데이트 요구"를 task로 변환합니다.

3. 작업(Task) 실행 : Scheduler는 작업 스케줄 루프를 통해 task를 실행합니다. 그러면 task의 callback은 react-reconciler에서 담은 callback이기 때문에 다시 react-reconciler로 돌아옵니다.

4. fiber 트리 구성 : fiber 구성 루프는 task 실행의 일부로 fiber 트리를 구성합니다.

5. commitRoot : task 실행의 일부로 최신 fiber 트리를 실제 DOM에 렌더링 합니다.

6. 그러면 task가 완료됩니다.

이렇게 입력 -> 출력 까지 전체 체인이 주 실행 흐름입니다. React는 이 흐름에서 더 나은 성능을 위해서 다양한 최적화 전략(Batch update, Interruptable rendering)을 구현합니다. 그 중 하나가 작업 스케줄 루프와 fiber 구성 루프의 협업 구조로 가능한 중단 가능한 렌더링 입니다.

3. 정리

이번 글에서는 두 workLoop를 거시적인 관점에서 설명했습니다. 이 두개의 루프를 중심으로 React 앱의 실행 흐름을 요약할 수 있었고 이 실행 흐름으로 중단 가능한 렌더링이 구현될 수 있음을 설명했습니다. react-reconciler와 scheduler 패키지는 코드량이 많고 복잡하지만 리액트의 주 실행 흐름을 지원하는 패키지이기 때문에 파악만하면 더 쉽게 파악할 수 있습니다.