React Native 렌더러는 렌더 파이프라인의 작업을 여러 스레드에 분산시킨다. 그렇다면, 스레드가 여러개 있다는 뜻일까?
맞다, 리액트 네이티브는 크게 UI 스레드, JS 스레드로 나뉜다.
UI 스레드(보통 메인 스레드라고 불림)
- 호스트 뷰를 조작할 수 있는 유일한 스레드이다.
JS 스레드
- 여기서 React의 렌더 단계와 레이아웃이 실행된다.
렌더링 시나리오
RN에서는 아래 사진과 같은 단계를 거쳐 최종적으로 화면을 보여주게 된다.
스레드가 여러개인건 알았으니, 각 스레드에서 일어나는 여러가지의 렌더링 시나리오를 살펴보면서 더 잘 이해해보자.
1. JS 스레드에서 렌더링
대부분의 렌더 파이프라인이 JS 스레드에서 이루어지는 가장 흔한 시나리오이다.
마지막 Mount 단계만 UI 스레드에서 진행됐는데 좀 전에 살펴봤듯이, UI 스레드가 호스트 뷰를 조작할 수 있는 유일한 스레드이기 때문이다.
2. UI 스레드에서 렌더링
UI 스레드에 우선순위가 높은 이벤트가 있을 때, 렌더러는 UI 스레드에서 모든 렌더 파이프라인을 동기화하여 실행할 수 있다.
3. Default or continuous event interruption - 기본 또는 연속적 이벤트에 의한 렌더링 중단
아래 그림은 UI 스레드에서 발생한 낮은 우선순위 이벤트가 렌더 단계(render phase)를 중단하는 상황을 보여준다.
React와 React Native 렌더러는 렌더 단계 자체를 중단할 수 있으며 이 경우에도 렌더링 작업 자체는 JS 스레드에서 계속 실행된다.
이게 무슨 뜻인지 좀 더 풀어서 알아보자.
- 우선 React가 컴포넌트 트리 계산(render phase)을 JS 스레드에서 하고 있었고, 아직 화면에 그리는(commit)작업은 안 한 상태이다.
- 이 때 UI 스레드에서 낮은 순위의 이벤트가 발생(Ex. 스크롤, 터치, 제스처)하면, JS 스레드에서 진행중이었던 렌더 단계가 중단될 수 있다.
- 그리고 UI 스레드에서 발생한 이벤트로 인한 state 변경을 수집하고, 기존에 렌더링 중이던 state와 병합할 수 있다. 가장 중요한건 JS 스레드에서 렌더링 작업이 이어서 진행된다는 것이다.
- 더 쉽게 말하면, 렌더링 작업이 완전히 취소되는 게 아니라 더 최신 상태를 반영하도록 조정된 채로 계속 진행된다는 뜻이다.
이 개념 덕분에 계속 스크롤 중에도 UI 스레드는 계속 이벤트를 처리하고, JS 스레드는 렌더링을 하다가도 중단 + 재개 가능하기 때문에 앱이 멈추지 않고 실행될 수 있다.
4. Discrete event interruption - 단일 고우선순위 이벤트에 의한 렌더링 중단
아래 그림은 UI 스레드에서 발생한 높은 우선순위 이벤트가 렌더 단계(render phase)를 중단하는 상황을 보여준다.
좀 전에 시나리오와 동일하게 렌더러는 렌더 단계를 중단하고 UI 스레드에서 실행된 고우선순위 이벤트와 상태를 병합할 수 있다.
위 3번 시나리오와의 차이점은 중단된 렌더링 작업을 UI 스레드에서 재개하여 동기적으로 진행하고,
React의 렌더 단계는 JS 스레드 담당이므로 렌더 단계를 진행 후, 다시 나머지 Layout, Commit, Mount 단계를 UI 스레드에서 처리하는 시나리오다.
5. C++ State update
UI 스레드에서 시작된 업데이트이며 렌더링 단계를 건너뛴다. 어떻게 렌더 단계를 건너뛸 수 있는지는 React Native Renderer State Updates 문서를 참고해보자.
