React Native 작동원리

React Native는 앱을 빌드할 때 전체 로직을 갖고 있는 JS Bundle를 생성한다.
그 Bundle는 각 iOS/Android 플랫폼에 심어준다. 각 플랫폼에서 어떻게 상호작용 하는지 알기 위해서는 스레드를 알아야한다.

 

React Native는 크게 두 가지 부분으로 구성

1. Native Threads
iOS에서 Objective-C/Swift 담당하고 Android에서는 Java/Kotlin 담당하는 곳으로  UI를 생성하는 부분

 

2. JS Thread
JS 코드를 통해 비즈니스 로직들이 실행되고 뷰를 언제, 어떻게 표시할지 실행되는 부분

Native Threads는 JS Thread 직접 상호작용 X
앱을 구현하기 위해 이 두 개를 소통하기 위해서는 Bridge 필요하다.

 

Bridge

Native Threads와 JS Thread 소통하기 위한 수단으로 이것은 Client - Server 통신하는 것과 비슷하다.
클라이언트-> 메인 스레드 / 서버 -> JS 스레드인 것이다. 아무튼 각 부분에서 전달되는 정보는 JSON object 형태로 변환되어서 전달된다.

결국은 React Native에서 가장 중요하다고 볼 수 있는 부분이 Bridge이다. 그 이유는 병목현상이 가장 많이 생기며 좋은 성능의 앱을 위해서 Bridge를 건너는 횟수를 최소한으로 해야한다. 

 

React Native앱의 실행과정

1. 앱이 시작되면 Native Threads 실행되고 Native Threads는 JS Thread 실행시키고 JS Bundle 로드한다.
2. JS Thread 실행되면서 virtual DOM 생성하고 diffing 알고리즘을 통해 변경사항을 Bridge 경유하여 Shadow Thread 전달한다.
3. Shadow Thread는 변경사항 메세지를 통해 화면의 레이아웃을 계산하고 계산이 끝난 레이아웃의 파라미터나 객체를 Native Threads 보낸다.
4. Native Threads는 UI를 화면에 표시한다.
5. 사용자가 화면에 입력한 UI 이벤트 정보들이 Bridge 경유하여 JS Thread로 보내진다.
6. UI 이벤트 메세지를 활용하여 JS Thread에서 비즈니스 로직들이 실행되고 다시 virtual DOM 생성하며 변경사항을 다시 Bridge 경유하여 Shadow Thread 전달된다.
7. 3,4,5,6 과정이 반복한다.