Skip to main content

스레딩 모델

caution

이 문서는 현재 활발히 배포 중인 새로운 아키텍처를 참조합니다.

React Native 렌더러는 렌더 파이프라인의 작업을 여러 스레드에 분배합니다.

여기서는 스레딩 모델을 정의하고, 렌더 파이프라인의 스레드 사용을 설명하기 위해 몇 가지 예제를 제공합니다.

React Native 렌더러는 스레드 안전성을 고려해 설계되었습니다. 높은 수준에서 스레드 안전성은 프레임워크 내부에서 불변 데이터 구조를 사용함으로써 보장됩니다(C++의 "const correctness" 기능에 의해 강제됨). 이는 React에서 모든 업데이트가 렌더러 내부에서 새로운 객체를 생성하거나 복제함을 의미하며, 데이터 구조를 직접 업데이트하지 않습니다. 이를 통해 프레임워크는 스레드 안전하고 동기적인 API를 React에 제공할 수 있습니다.

렌더러는 두 가지 다른 스레드를 사용합니다:

  • UI 스레드 (주로 메인 스레드라고 함): 호스트 뷰를 조작할 수 있는 유일한 스레드입니다.
  • JavaScript 스레드: React의 렌더 단계와 레이아웃이 실행되는 스레드입니다.

각 단계의 실행 시나리오를 살펴보겠습니다:

스레딩 모델 심볼

Render Scenarios

자바스크립트 스레드에서 렌더링하기

이것은 렌더링 파이프라인의 대부분이 자바스크립트 스레드에서 이루어지는 가장 일반적인 시나리오입니다.

스레딩 모델 사용 사례 1

UI 스레드에서 렌더링하기

UI 스레드에서 높은 우선순위 이벤트가 발생하면, 렌더러는 UI 스레드에서 모든 렌더링 파이프라인을 동기적으로 실행할 수 있습니다.

스레딩 모델 사용 사례 2

기본 또는 지속적인 이벤트 중단

이 시나리오는 UI 스레드에서 낮은 우선순위 이벤트에 의해 렌더링 단계가 중단되는 상황을 보여줍니다. React와 React Native 렌더러는 렌더링 단계를 중단하고 UI 스레드에서 실행되는 낮은 우선순위 이벤트와 상태를 병합할 수 있습니다. 이 경우 렌더링 프로세스는 JS 스레드에서 계속 실행됩니다.

Threading model use case three

이산적 이벤트 인터럽션

렌더링 단계는 인터럽트 가능합니다. 이 시나리오는 UI 스레드에서 발생한 높은 우선순위 이벤트에 의해 렌더링 단계가 중단되는 상황을 보여줍니다. React와 렌더러는 렌더링 단계를 중단하고 UI 스레드에서 실행된 높은 우선순위 이벤트와 그 상태를 병합할 수 있습니다. 렌더링 단계는 UI 스레드에서 동기적으로 실행됩니다.

Threading model use case four

C++ 상태 업데이트

UI 스레드에서 시작된 업데이트로, 렌더링 단계를 건너뜁니다. 자세한 내용은 React Native 렌더러 상태 업데이트를 참고하세요.

스레딩 모델 사용 사례 6