Skip to main content

크로프 플랫폼 구현

caution

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

React Native 렌더러는 플랫폼 간 공유를 위한 핵심 렌더링 구현을 활용합니다​

이전 React Native 렌더링 시스템에서는 React Shadow Tree, 레이아웃 로직, 그리고 View Flattening 알고리즘이 각 플랫폼마다 별도로 구현되었습니다. 현재 렌더러는 핵심 C++ 구현을 공유하여 크로스 플랫폼 솔루션으로 설계되었습니다.

React Native 팀은 애니메이션 시스템을 렌더링 시스템에 통합하고, Windows, 게임 콘솔, TV 등의 운영체제와 같은 새로운 플랫폼으로 React Native 렌더링 시스템을 확장할 계획입니다.

핵심 렌더링 시스템에 C++을 활용하면 여러 가지 이점이 있습니다. 단일 구현으로 개발 및 유지보수 비용이 줄어듭니다. 또한 Yoga와 렌더러의 통합 오버헤드가 최소화되어 Android에서 React Shadow Tree 생성 및 레이아웃 계산 성능이 향상됩니다 (즉, Yoga에 대한 JNI가 더 이상 필요하지 않음). 마지막으로, C++에서 할당된 React Shadow Node의 메모리 사용량이 Kotlin이나 Swift에서 할당된 경우보다 작습니다.

팀은 또한 불변성을 강제하는 C++ 기능을 활용하여 공유되지만 보호되지 않은 리소스에 대한 동시 접근과 관련된 문제가 없도록 보장합니다.

Android의 렌더러 사용 사례에서는 여전히 두 가지 주요 사용 사례에 대해 JNI 비용이 발생한다는 점을 인식하는 것이 중요합니다:

  • 복잡한 뷰(예: Text, TextInput 등)의 레이아웃 계산은 JNI를 통해 props를 전송해야 합니다.
  • 마운트 단계에서는 JNI를 통해 뮤테이션 작업을 전송해야 합니다.

팀은 ReadableMap을 ByteBuffer를 사용하여 데이터를 직렬화하는 새로운 메커니즘으로 대체하여 JNI 오버헤드를 줄이는 방안을 탐구하고 있습니다. 목표는 JNI 오버헤드를 35~50% 줄이는 것입니다.

렌더러는 두 가지 측면의 C++ API를 제공합니다:

  • (i) React와 통신하기 위한 API
  • (ii) 호스트 플랫폼과 통신하기 위한 API

**(i)**의 경우, React는 렌더러와 통신하여 React Tree를 렌더링하고 이벤트(예: onLayout, onKeyPress, 터치 등)를 "수신"합니다.

**(ii)**의 경우, React Native 렌더러는 호스트 플랫폼과 통신하여 화면에 호스트 뷰를 마운트(생성, 삽입, 업데이트 또는 삭제)하고, 호스트 플랫폼에서 사용자가 생성한 이벤트를 수신합니다.

크로스 플랫폼 구현 다이어그램