React Native 아키텍처 진화

서론

이전 편 (React Native 아키텍처 일람) 에서는 설계, 스레드 모델 등의 측면에서 React Native 의 기존 아키텍처를 소개했습니다. 본고에서는 이 아키텍처의 한계와, React Native 가 진행 중인 아키텍처 업그레이드 계획을 분석합니다

一.기존 아키텍처의 한계

초기 설계는 몇 가지 제한도 가져왔습니다:

• 비동기: JavaScript 로직을 동기 답변을 필요로 하는 많은 Native API 와 직접 통합할 수 없음

• 배치 처리: React Native 애플리케이션이 Native 구현 함수를 호출하는 것이 어려움

• 직렬화: 메모리를 직접 공유하는 대신 불필요한 copy 가 존재

이러한 문제들은 Native + React Native 의 하이브리드 애플리케이션에서 특히 두드러집니다:

For apps that are entirely built in React Native, these restrictions are usually bearable. But for apps with complex integration between React Native and existing app code, they are frustrating.

二.아키텍처 업그레이드 계획

따라서, 2018 년 6 월에 대규모 리팩토링 계획이 제안되었으며, 하이브리드 애플리케이션을 더 잘 지원하는 것을 목적으로 합니다:

We're working on a large-scale rearchitecture of React Native to make the framework more flexible and integrate better with native infrastructure in hybrid JavaScript/native apps.

구체적으로는, 3 가지 중대한 변경이 있습니다:

• 스레드 모델: 임의의 스레드에서 JavaScript 를 동기 호출하여 고우선순위 업데이트를 실행 가능. UI 업데이트는 더 이상 3 개의 스레드를 건널 필요가 없음

• React: async rendering, Data Fetching 등 React 16+의 신기능을 지원

• Bridge: 간소화 최적화되어, Native 와 JavaScript 간의 직접 호출을 가능하게 함

동기 호출의 지원으로 이전에는 구현이 어려웠던 것들이 가능해졌습니다. 예를 들어 크로스언어 콜스택 트레이스 등

아키텍처 도표에 대응하면, 각 층을 개별적으로 최적화하는 것에 해당합니다:

• React 층: JavaScript 형식 안전성을 강화하고, React 16+신기능을 지원

• JavaScript 층: JSI 를 도입하여, 다른 JavaScript 엔진의 교체를 가능하게 함

• Bridge 층: Fabric 과 TurboModules 의 2 부분으로 분할하여, 각각 UI 렌더링과 Native 모듈을 담당

• Native 층: 코어 모듈을 간소화하고, 비코어 부분을 커뮤니티 모듈로 분할하여 독립적으로 업데이트 유지

예비 추정으로는, 이러한 리팩토링 작업은 2019 년 말 또는 2020 년 초에 완료될 예정입니다:

It's likely this massive piece of work will reach its conclusion around Q4 2019 or Q1 2020, but there are no confirmed dates.

P.S.현재 (2019/9/8) 는 완료된 JSI 를 제외하고, 나머지 리팩토링 계획은 진행 중입니다. 상세는 The New React Native Architecture Explained: Part Four 참조

三.JavaScript 형식 안전성 강화

주요 변경점은, CodeGen 도구를 제공하여 메시지 통신의 형식 안전성을 보증하고, JavaScript 와 Native 통신에서 널리 비판받고 있는 Bridge API 데이터 형식 문제를 해결하는 것입니다:

We also experienced many issues in which the types coming from JavaScript were unexpected. For example, integers were often wrapped by strings, an issue that isn't realized until it is passed over a bridge. To make matters worse, sometimes iOS will fail silently while Android will crash.

(React Native at Airbnb: The Technology 에서 인용)

한편, 형식 제약은 통신 성능에도 일정의 도움이 됩니다:

This automation will speed up the communication too, as it's not necessary to validate the data every time.

四.JSI 도입

상층 JavaScript 코드는 런타임 환경을 필요로 하며, React Native 에서 이 환경은 JSC(JavaScriptCore) 입니다. 이전과 달리 JavaScript 코드를 직접 JSC 에 입력하는 것이 아니라, 새로운 아키텍처에서는 JSI(JavaScript Interface) 의 층을 도입하여, JSC 상의 추상으로서, JavaScript 엔진의 차이를 은폐하고, 다른 JavaScript 엔진의 사용을 가능하게 합니다 (최근 출시된 Hermes 등)

더욱 중요한 것은, JSI 가有了之后, JavaScript 는 C++ 객체의 참조를 보유하고, 그 메서드를 호출할 수 있다는 것입니다:

By using JSI, JavaScript can hold reference to C++ Host Objects and invoke methods on them.

이를 통해 JavaScript 와 Native 의 직접 호출이 가능해지고, 크로스스레드 메시지 통신을 거칠 필요가 없으며, 직렬화/비직렬화 비용을 생략하고, Bridge 의 통신 압력을 경감할 수 있습니다 (대량 메시지의排队 정체 등)

동시에JSI 가所在한 C++ 층은 Native 코드를 재사용하는 방식으로도 기능하며, Native 의 자연스러운 지원을 가집니다:

• Android: JNI(Java Native Interface) 를 통해 C 또는 C++ 모듈 호출

• iOS: Objective-C 는 기본적으로 지원

五.Bridge 층 리팩토링

새로운 Bridge 층은 Fabric 과 TurboModules 의 2 부분으로 분할됩니다:

• Fabric: UI 관리 담당

• TurboModules: Native 와의 인터랙션 담당

Fabric 은 더 현대적인 방식으로 React Native 의 렌더링 층을 구현하는 것을 기대하며, 이전의 렌더링 플로우 중의 복잡한 크로스스레드 인터랙션 (React -> Native -> Shadow Tree -> Native UI) 을 간소화합니다. 구체적으로는, ��접 C++ 층에서 JavaScript 와 Native 가 공유하는 Shadow Tree 를 생성하고, JSI 층을 통해 UI 조작 인터페이스를 JavaScript 에 공개하며, JavaScript 가 고우선순위의 UI 조작을 직접 제어 가능하게 하고, 동기 호출까지 가능하게 합니다 (리스트의 고속 스크롤, 페이지 전환, 제스처 처리 등의 시나리오에 대응)

이전에는 모든 Native Modules(사용할 필요가 있는지 여부와 관계없이) 은 애플리케이션 기동 시에 초기화가 필요했습니다. Native 는 JavaScript 가 어떤 기능 모듈을 호출할지 알 수 없기 때문입니다. 새로운TurborModules 는 Native 모듈의 온디맨드 로드를 가능하게 하며, 모듈 초기화 후에 직접 그 참조를 보유하게 되어, 메시지 통신에 의존하여 모듈 기능을 호출할 필요가 없어집니다. 따라서, 애플리케이션의 기동 시간도 향상됩니다

六.코어 모듈 간소화

이론상, React Native 는 보편적이고, 플랫폼에 무감각해야 합니다. 이는 Web, Windows 등 다른 플랫폼을 지원하는 핵심입니다

Native 는 React Native 의 장악 중에 없고, 수직적으로 깊게 최적화할 수 없지만, 횡방향의 간소화는 가능합니다. 비코어 부분의 코드를 커뮤니티 모듈로 분할합니다. 예를 들어 AsyncStorage, ImageStore, MaskedViewIOS, NetInfo 등. 한편으로는 패키지 체적을 축소하고, 다른 한편으로는 이러한 모듈의 독립적인 업데이트 유지에도 유리합니다

참고 자료

• [The React Native Re-architecture](https://medium.com/ @Kelset/the-react-native-re-architecture-ab7219850d4f): 4 편详细介绍 The New React Native Architecture Explained, The New React Native Architecture Explained: Part Two, The New React Native Architecture Explained: Part Three, The New React Native Architecture Explained: Part Four

• React Native's new architecture - Glossary of terms

• React Native Scheduling

• React Native - Fabric review-2018-07-25

• React Native: Under the Hood: 및 配套 Slides

• React Native Architecture Overview: 및 配套 Slides

• Breaking Down Bridging in React Native: 및 配套 Slides, 및 文字版

• State of React Native 2018