React Native 새 아키텍처 이해하기: 브릿지를 대체한 JSI

TL;DR#

• 기존 React Native는 JavaScript, Native/UI, Shadow 세 개의 Thread가 브릿지를 통해 통신합니다. 이때 데이터를 직렬화/역직렬화하는 비용이 발생해 성능이 느려집니다.
• 새 아키텍처는 브릿지를 제거하고 JSI(JavaScript Interface) 라는 C++ 모듈을 도입해, JavaScript가 Native 영역의 메서드를 직접 참조하고 호출하도록 바꿨습니다.
• JSI 덕분에 JavaScriptCore 외에 V8 같은 다른 엔진도 사용할 수 있고, Fabric(동기 렌더링)과 Turbo Modules(지연 로딩)로 렌더링과 앱 초기 실행 성능이 개선됩니다.

기존 아키텍처#

React Native는 주요 세 개의 Thread로 실행됩니다.

• The JavaScript thread
  • 자바스크립트 엔진으로 동작하며, 자바스크립트 코드 번들링에 사용됩니다.
  • JavaScriptCore라고 불리는 엔진이 사용됩니다.
• The Native/UI thread
  • Native Module(블루투스 기능 같은 것들), UI 렌더링, 스크롤 같은 gesture 이벤트 처리에 사용됩니다.
• Shadow thread
  • 요소들이 화면에 렌더링되기 전에 요소들의 크기, 위치 등을 계산하는 데 사용됩니다.
  • Yoga라고 불리는 레이아웃 엔진이 사용됩니다.

위 세 개의 Thread가 서로 통신하면서 사용자가 사용할 수 있는 화면이 만들어집니다.

각 Thread는 어떻게 통신할까?#

세 Thread는 버스 같은 역할을 하는 브릿지를 통해 통신합니다.

브릿지란?#

• 번들링된 JS 코드를 JSON 형태로 직렬화(serialization) 합니다.
• 직렬화된 것을 역직렬화(deserialization, decode) 해서 Native Thread로 보냅니다.
• 이 과정에서 시간 소모(time consuming)가 발생하며, 느린 성능으로 이어집니다.
• 이 모든 작업은 비동기로 이루어지며, 그래서 FlatList로 많은 데이터를 다룰 때 이슈가 발생합니다. 일반적인 상황에서는 비동기가 장점으로 작용하지만, 가끔 동기적으로 처리해야 할 때가 있습니다.

새로운 아키텍처#

새 아키텍처는 기존 브릿지를 제거하고 Native UI 메서드를 직접 제어할 수 있게 했습니다. 중간 데이터 전달에 드는 시간 소모가 없기 때문에 훨씬 빨라졌습니다.

JSI (JavaScript Interface)#

• C++로 만들어졌습니다.
• 브릿지를 대체한 새로운 모듈입니다.
• Native 영역에서 곧바로 메서드를 실행할 수 있습니다.
• 브릿지는 JavaScriptCore 엔진에서만 동작했지만, JSI는 JavaScriptCore 엔진과 디커플링될 수 있습니다. 즉, V8 같은 다른 자바스크립트 엔진도 사용할 수 있습니다.
• JavaScript가 Native 메서드에 대한 reference를 계속 가지고 있게 해줍니다. 이는 웹과 비슷한 방식으로 동작하는 것입니다.

javascript
복사
const container = document.createElement(‘div’);

예를 들어 container라는 변수에 createElement한 값을 할당했을 때, container를 입력하고 "."을 누르면 관련 메서드들이 바로 나옵니다. 이것 또한 C++로 초기화된 DOM 요소의 참조값을 가지고 있기 때문입니다.

정리하면 JSI는 다른 자바스크립트 엔진을 사용할 수 있게 해주며, JS Thread에서 곧바로 Native 영역의 Thread와 통신할 수 있도록 해줍니다. 브릿지의 직렬화/역직렬화 작업이 사라졌기 때문에 훨씬 더 빠른 속도를 보여줍니다. 또한 C++로 작성되었기 때문에 스마트 TV나 시계에서도 동작할 수 있어 타겟층도 더 넓힐 수 있습니다.

Fabric#

• 기존 비동기 렌더링에서 발생하던 이슈(많은 데이터를 가진 FlatList에서 스크롤할 때 발생하는 이슈)를 해결한 새로운 렌더링 시스템입니다.
• JSI를 사용해 Native 메서드의 reference를 가지고 곧바로 사용하는 것처럼, UI 메서드에 대한 reference를 가지고 있습니다. 그래서 UI를 동기적으로 처리할 수 있습니다. 덕분에 더 빠른 렌더링을 보여주며, 더 안정적인 gesture handling이 가능합니다.
• 즉, 즉각적인 반응이 필요한 UI 관련 이벤트는 동기적으로 처리해 빠르게 동작하도록 바뀌었고, API 요청 같은 경우는 비동기로 처리되어 마치 웹처럼 동작하도록 바뀌었습니다.

Turbo Modules#

• 기존 아키텍처에서는 모든 Native Module(bluetooth, geolocation 등)을 앱이 열리기 전에 초기화합니다.
• 새 아키텍처에서는 JSI 덕분에 Native Module에 대한 reference를 가지고 있고, 필요할 때 로드하는 lazy 방식을 사용해 더욱 최적화된 방식이 적용됩니다. 그 덕분에 첫 앱 실행 성능이 훨씬 향상됩니다.

정리#

• 데이터를 운반하는 버스 역할을 하던 브릿지가 사라지고 JSI라는 모듈이 도입되어, Native 영역에 대한 reference를 직접 가지고 있어 빠른 통신이 가능합니다.
• JavaScriptCore 엔진만 쓸 수 있는 것이 아니라, V8 같은 다양한 엔진을 사용할 수 있습니다.
• 웹처럼 요소들을 렌더링할 수 있습니다.
• Turbo Modules의 Lazy Loading이 가능합니다.
• 시간에 민감한 작업에 대해 동기 처리가 가능합니다.