렌더링 과정

1. JavaScript 번들 실행 (JavaScript Thread)
2. 앱이 시작되면 JavaScript 번들이 JavaScript 스레드에서 실행
   • 이 스레드는 React 컴포넌트 로직을 실행하고 UI 구조 정의
3. React Element Tree 생성 (JavaScript Thread)
   • React Element Tree는 UI 구조를 표현하는 JavaScript 객체 트리.
   • React 컴포넌트의 타입, props, 자식 요소 정보를 포함
4. React는 컴포넌트 로직을 실행하여 React Element Tree 생성
   • React Element Tree는 순수한 JavaScript 객체로, UI의 구조와 속성 표현
   • 이 트리는 React 컴포넌트의 계층 구조를 나타내며, 각 노드는 컴포넌트의 타입, props, 자식 요소 등의 정보 포함.
5. React Shadow Tree 생성 (Shadow Thread)
   • React Element Tree를 기반으로 React Shadow Tree가 생성
   • React Shadow Tree는 레이아웃 계산을 위한 중간 표현으로, C++로 구현.
   • 각 Shadow Node는 React 컴포넌트에 대응하며, 레이아웃 관련 정보를 포함.
   • Shadow Tree는 JavaScript와 네이티브 플랫폼 사이의 브릿지 역할을 하며, 효율적인 레이아웃 계산을 가능하게 함.
6. 레이아웃 계산 (Shadow Thread)
   • Yoga 레이아웃 엔진을 사용하여 React Shadow Tree의 각 노드에 대한 레이아웃을 계산
   • 이 과정에서 각 컴포넌트의 크기와 위치 결정
7. 네이티브 UI 업데이트 명령 생성 (Shadow Thread)
   • 레이아웃 계산 결과를 바탕으로 네이티브 UI를 업데이트하기 위한 명령 생성.
8. 네이티브 UI 업데이트 (Main/UI Thread)
   • 생성된 업데이트 명령이 Main/UI 스레드로 전달.
   • 이 스레드에서 실제 네이티브 UI 컴포넌트가 생성되거나 업데이트.
9. 화면에 렌더링 (Main/UI Thread)
   • 최종적으로 업데이트된 네이티브 UI 컴포넌트가 화면에 렌더링.

주요 개념 요약

JavaScript Thread

React Native 앱의 JavaScript 코드가 실행되는 스레드. React 컴포넌트 로직과 상태 관리가 이루어짐.

Shadow Thread

레이아웃 계산과 UI 업데이트 준비를 담당하는 백그라운드 스레드. React Shadow Tree를 생성/관리.

Main/UI Thread

실제 네이티브 UI 컴포넌트를 생성하고 화면에 렌더링하는 스레드. 사용자 상호작용도 이 스레드에서 처리.

React Element Tree

React 컴포넌트의 렌더링 결과를 나타내는 가벼운 JavaScript 객체 트리. 각 요소는 컴포넌트의 타입, props, 자식 요소 등을 포함. 이 트리는 UI의 구조를 설명하지만 실제 DOM이나 네이티브 뷰와는 직접 연결되지 않음.

React Shadow Tree

UI의 구조와 레이아웃 정보를 담고 있는 중간 표현. JavaScript와 네이티브 플랫폼 사이의 브릿지 역할을 한다. C++로 구현되어 있어 빠른 레이아웃 계산이 가능. Shadow Tree는 React Element Tree의 각 요소에 대응하는 노드를 가지며, 이 노드들은 레이아웃 계산에 필요한 추가 정보 포함.

Yoga 레이아웃 엔진

Facebook에서 개발한 크로스 플랫폼 레이아웃 엔진으로, Flexbox 스타일의 레이아웃 계산 수행.