React Native 작동 원리

React Native 작동 원리

React Native 앱은 1) Native 부분과 2) JS 부분으로 구성되어있다.

1) Native 부분

Android(Java 기반)/iOS Device(Objective-C 기반)가 담당하는 부분으로, UI를 렌더한다.

2) JS 부분

React 관련 코드가 실행되는 스레드

React Native 앱을 실행하면,

1) Main Thread(UI Thread)가 2) JS Thread를 실행시켜 JS 코드를 번들링한다.

• JS Thread가 실행되면서 React는 V-DOM을 생성해서 변경 사항을 Native Bridge를 통해 Main Thread로 전달한다.

• 정보를 전달받은 Main Thread는 화면에서 UI를 표시하고 UI 화면에서 이벤트가 발생하면 이것이 다시 Native Bridge를 통해 JS Thread로 전달되는 일련의 과정이 반복된다.

• 기기 자체에서 바로 실행되는 코틀린이나 스위프트에 비해 느리다.

• Main Thread와 JS Thread는 Native Bridge를 통해 소통한다.

JS Thread

• React Native 앱을 실행하기 위해 JS 코드를 하나의 파일로 번들링 해준다.

• 번들링된 JS 코드를 JS Thread가 실행하여 이벤트 루프가 끝날 때마다 메인 스레드에 어떤 뷰를 표시할 건지에 대한 정보를 전달한다.

Main Thread

• 앱이 실행되자마자 시작된다.

• 앱을 로드하고 JS Thread를 실행한다.

• JS Thread가 Native Bridge를 통해서 보내오는 정보들을 해석해서 UI에 그려준다.

• 사용자들의 동작(이벤트)를 받아 Native Bridge를 통해 JS Thread로 넘겨준다.