[React Native]RN의 기본 지식1

Lee Yongin·2023년 9월 15일

Bridge metro react native 아키텍처

리액트 네이티브

목록 보기

2/6

효과적인 퍼포먼스를 내는 React native 애플리케이션 개발을 위해서는 프레임워크에 대한 이해도가 높아야 한다. 앞으로 몇개의 포스팅을 거쳐 React native 기본지식을 정리하도록 하겠다.

React Native는 무엇인가

Javascript만을 사용해서 안드로이드 & IOS 앱을 만든다.

facebook이 2015년에 개발함
Javascript 기반의 크로스 플랫폼 프레임워크
react native로 만들어진 앱
- Facebook, Skype, Tesla, Discord, Bloomberg, Pinterest등 showcase도 화려한 편이다.

React Native의 'Native'는 어떤 뜻인가?

'Native'는 특정 운영시스템, 플랫폼 또는 디바이스 환경에서 작동하는 앱을 나타낸다. 리액트 네이티브 동작의 핵심은 android & ios의 컴포넌트를 렌더링하기 위해 native API(Objective-C/Swift or Java API)를 사용한다는 점이다. HTML/CSS/Javascript으로 만든 웹 기반 뷰를 패키징해서 모바일에서 렌더링하는 웹앱과의 차이점으로서 'Native'라고 하는 것이 아닐까 유추할 수 있다.~~(아님 말고...)~~

아키텍처

Bridge

이전 아키텍처의 핵심은 'Bridge'라는 컴포넌트였다. 자바스크립트 코드(생산계층)와 android, ios의 native코드(소비계층) 간의 번역을 해주는 것이다. 생산된 JS코드를 하나의 패키지(JS Bundle)로 만든 후 JS Thread에서 JSON으로 직렬해서 bridge를 매개로 UI Thread의 native단으로 보내는 방식으로 이루어졌다.

Shadow Thread

Yoga라는 레이아웃 엔진을 사용해서 디바이스 화면의 UI element 위치를 계산한다.

예전 방식의 아키텍처의 문제는 아래와 같다.

1.오버헤드 발생:데이터를 써야할 때마다 JSON으로 역직렬,직렬하는 비용이 든다.
2.비동기: 데이터를 보내고나서 다른 계층이 처리하기를 비동기적으로 대기해야 한다.
3.단일 스레드: 모든 계산이 해당 단일 스레드에서 수행된다.

2018년 이후의 새 아키텍처는 'Fabric'(UI-Layer Re-architecture)이다. 무엇이 바뀌고 어떤 이점을 가져오는지, 빌드 과정이 어떻게 수정되었는지 보면된다. 결론부터 말하자면 비동기적이고 간접적인 호출이 동기적이고 직접적인 호출로 바뀌었고, 더 효율적인 작업을 기대할 수 있게 되었다.

위의 그림을 보면 JS Thread와 UI Thread 사이에 Bridge대신 Generated Interface라는 것이 생겼고 CodeGen이라는 것도 보인다.

JavaScript Interface

줄여서 JSI라고 하며, 브릿지를 대체하는 역할이다.
JSI는 JS engine이 native Thread에 있는 메소드를 직접 호출하기 위해 사용된다. 이로써 브릿지가 갖고있던 비동기문제, 단일 스레드 커뮤니케이션, 직렬/역직렬 오버헤드 문제를 개선할 수 있다고 한다. 또한 Chakra, Hermes 같은 타 JS engine에서도 범용적으로 사용가능하다.

Turbo Modules

자바스크립트 코드가 필요한 모듈만 개별적으로, 동기적으로 로딩시키도록 할 수 있다. 이전 아키텍처에선 앱이 시작되기 전 모든 네이티브 모듈을 초기화를 해야했던 단점을 개선시킨 것이다.

Fabric

새로운 Native Renderer이며 웹의 렌더링 시스템을 닮았다. JSI가 JS와 Native Thread를 직접적으로 매개해줌에 따라(UI Thread도 JSI 동작안에 포함되어 있으므로) 네비게이션 및 제스쳐 동작 퍼포먼스를 함께 개선시켜주는 UI Manager이다.
또한 유저의 인터랙션이 native thread에서 동기적으로 실행되도록 우선시되게 해주는 역할도 있다.

Codegen

사용은 의무가 아니고 아래 명령어로 따로 설치해서 사용한다.

yarn add <path/to/your/TurboNativeModule_or_FabricNativeComponent>

native와 js 코드 사이의 유형 안정성을 높이기 위해 개발되었다. 공식문서의 첫 문장이 "자바스크립트의 정적 타이핑을 통해 새로운 아키텍처가 요구하는 C++ 보일러플레이트를 생성한다."라고 되어있는데 c++코드가 생성되는 이유는 Typescript나 Flow를 사용해서 정적 타이핑을 한 경우 이 유형정보를 통해 native와 js코드 사이의 인터페이스에 대한 코드가 c++이기 때문이다. 따라서 개발자를 대신해 인터페이스 코드를 작성해줌으로써 오류 발생을 줄이고 개발과정을 단축시킬 수 있다.