[React-Native] 아키텍처 : JSI, 렌더링 시스템 Fabric과 TurboModules

이전 브릿지를 사용한 구 아키텍처에서 javascript 코드와 렌더링 시스템과 서로 소통하기 위해선 JSON 으로 변환하는 과정을 반드시 거쳐야 했습니다.

이는 마치 한국인이 아프리카 은데벨레족과 소통하기 위해 중간에 미국인을 두고 번역을 하는 것과 마찬가지입니다. 이러한 구조는 성능 저하 문제를 야기했습니다.

 

JSI (JavaScript Interface)

JSI는 자바스크립트 엔진에 추가할 수 있는 API로 javascript와 C++ 오브젝트와 소통이 가능하도록 만들어줍니다. C++ 과의 소통이 가능하다는 점은 크로스플랫폼에서 크나큰 장점이 되는데요, 그 이유는

• 안드로이드 네이티브 코드는 C/C++로 설계
• iOS 는 기본적으로 C/C++을 지원

하기 때문입니다. JSON 으로 변환하여 통신하는 방법보다 JSI를 통해 C++으로 통신하는 방법을 통해 성능 향상의 이점을 취할 수 있습니다.

 

Fabric

React-Native에서 사용중인 렌더링 시스템으로 Shadow Tree를 C++로 설계합니다. 앞선 JSI 의 장점과 동일하게 Shadow Tree를 C++로 설계함에 따라 성능이 향상되었습니다.

또한 과거 Bridge 아키텍처의 문제였던 비동기 처리 문제를 해결하기 위해 동기적으로 수행됩니다. 

Fabric 렌더링 과정은 크게 Render Phase -> Commit Phase -> Mount Phase 이 세가지 단계로 나뉩니다.

• Render Phase에서는 JSI를 통해 javascript 코드로부터 Shadow Tree를 C++로 생성
• Commit Phase에서는 yoga를 통해 Shadow Tree의 레이아웃 계산 (x,y좌표 등)
• Mount Phase에서는 Shadow Tree의 각 노드와 대응되는 Host View를 생성하여 네이티브 화면에 생성

https://reactnative.dev/architecture/render-pipeline#phase-2-commit

Mount Phase 에서 Shadow Tree 에 불필요한 노드가 있는 경우 View Flattening 알고리즘을 통해 반드시 화면에 그려야만 되는 Host View만 그리게 됩니다.

 

TurboModules

새로운 아키텍처의 네이티브와 소통할 수 있는 모듈로, 개발자는 공식 문서를 통해 직접 Turbo Native Module을 구현할 수 있습니다.

 

출처

Render, Commit, and Mount · React Native

The New React Native Architecture Explained: Part Three

Fabric · React Native