React Native의 새로운 아키텍처

React Native 0.68 버전부터 도입된 새로운 아키텍처를 알아본다. 참고로 새로운 아키텍처를 적용하기 위해서는 별도의 설정이 필요하다.

All components of New Architecture

• Codegen (Native code generator)
• JSI (JavaScript Interface)
• Hermes Engine (A JS engine that runs JS code in devices)
• Turbo Module (It Implements Native Module by using JSI & Native Code)
• Fabric (Native UI renderer/ New render engine)
• Fabric renderer (The new render pipeline creator)
• Yoga (Cross platform layout engine)

New Architecture two Phases

1. App Build time

• Codegen과 Turno Module을 켜고 프로덕션 배포 직전에 앱 파일을 생성하기 위해 build 명령어를 입력하면 다음의 흐름이 실행된다.
• JavaScript code를 bytecode로 컴파일한다.
• 빌드 타임 동안 Codegen을 사용해서 native code 또한 생성된다.
• bytecode와 native code가 디바이스에 설치할 수 있는 앱 패키지에 포함된다.

2. App Run time

• 사용자가 앱을 실행하면 새로운 아키텍처의 나머지 과정들이 실행된다.
• 주로 Turbo Module, Fabric 두 개의 큰 컴포넌트가 실행된다.

Codegen

• Generate Native code: Codegen은 Turbo Module과 Fabric 컴포넌트를 위해 Native Code를 생성하는 역할을 한다.
• Static type checking: 자바스크립트는 동적 타입 언어이고, C++은 정적 타입 언어이다. Codegen은 정적 타입을 체크해서 자바스크립트와 C++ 사이에 타입으로 인한 문제를 해결한다.
• 이렇게 생성된 native code는 typed JavaScript code와 직접적으로 소통할 수 있다.

JSI (JavaScript Interface)

• JSI는 C++로 작성되어서 자바스크립트의 객체와 함수에게 native interface를 제공한다.
• C++은 Android, iOS, Windows, macOS 등 다양한 플랫폼에서 실행될 수 있는 언어이기 때문에, 앱을 다른 플랫폼으로 port 하는 데 소요되는 작업량을 줄여준다.
• JSI로 인해 네이티브 메서드는 C++ 객체를 통한 자바스크립트에 노출된다. 이 객체들은 자바스크립트 코드를 참조하기 때문에 직접적으로 호출할 수 있다.
• JSI는 Hermes Engine, Turbo Module, Fabric 세 개의 컴포넌트에서 사용된다.

Hermes Engine

• Hermes는 앱을 실행할 때 디바이스에서 실행되는 자바스크립트 엔진이다.
• 앱 사이즈를 줄이고, 메모리 사용량을 향상시키며, 앱 시작 시간을 단축시킨다는 장점이 있다.
• 앱을 실행할 때 Heremes는 앱의 JavaScript code와 Native code를 모두 포함하는 bytecode를 로드한다.
• Hermes는 JSI를 사용해서 앱의 Native code와 소통한다. JSI는 Hermes가 네이티브 함수와 객체에 직접적으로 접근할 수 있도록 한다.
• Hermes는 Fabric을 이용해서 UI를 업데이트한다.

Turbo Modules

• Turbo Module은 JSI와 Native Code를 사용해서 Native Module을 실행한다.
• 사용하지 않는 모듈이라도 모두 초기화했던 이전 Native Modules와는 다르게 Turbo Module은 앱을 시작할 때 Native Modules에 Lazy Loading을 적용한다.

Fabric

• Fabric은 디바이스에서 UI를 렌더링하는 역할을 한다.
• Fabric은 Hermes와 native code와 소통하기 위해 JSI를 이용하기 때문에 네이티브 사이드와 데이터를 주고받을 때 더욱 성능이 좋다.
• 이제 Fabric renderer에서 Suspense, Concurrent와 같은 리액트 18의 기능들을 사용할 수 있다.

Fabric render pipeline

1. The Render phase

• 리액트는 코드를 실행하여 React element tree를 생성한다. React Element는 순수 자바스크립트 객체로 이루어져 있다.
• Fabric Renderer가 React element tree를 사용해서 C++로 이루어진 React shadow tree를 생성한다.
• 이 과정에서 각 React element마다 shadow node가 생성된다.

2. The Commit phase

• Layout calculation: Cross-platform layout engine Yoga를 호출해서 각 React shadow node의 위치와 크기 등 레이아웃을 계산한다.
• Tree promotion: 새로운 React shadow tree를 마운트 될 다음 트리로 promote한다. 이 promotion은 React element tree의 최신 상태를 나타낸다.

3. The Mount phase

• layout calculation 데이터를 포함한 React Shadow Tree가 렌더링된 픽셀 값과 함께 host view tree(안드로이드 혹은 IOS와 같은 호스트 트리의 view tree)로 변환된다.
• Fabric renderer가 각 React shadow에 해당하는 host view를 생성하고 이를 화면에 마운트한다.

Reference

React Native — Ultimate Guide on New Architecture in depth