React Native를 사용해 앱을 개발할때 어떤 과정을 통해서 JS 코드가 Native로 동작하는지 정리할 필요를 느꼈다.
브릿지
사진 출처: https://brocoders.com/blog/react-native-interview-questions/
네이티브 코드(Kotlin/Java, Objective-C)의 경우 기기에서 직접 실행되지만 JS의 경우 기기에서 직접 실행하지 못하기 때문에 가상 머신을 필요로하게된다.
이를 위해 RN에서는 JavaScriptCore라는 JS 엔진이 탑재되어 JS코드를 앱 내에서 실행해준다.
JS 코드와 네이티브 코드는 직접 소통할 수 없기 때문에 서로 이해할 수 있는 JSON으로 통신을하는데 이 작업은 브릿지가 처리한다.
사진 출처: https://www.yeummy-blog.com/post/80285a63-730b-4cd7-94eb-399af12b994e
빌드 타임에 네이티브 코드는 Java, C++ 바이너리 파일로 컴피일되고 JS 코드는 Metro 번들러를 통해 번들된다. 바이너리와 JS 번들은 플랫폼용 실행 파일(apk, ipa)안에 패킹되며 런타임동안 JS코드는 JS가상머신에서 실해오디고 네이티브 코드는 기기에서 직접 실행된다. 브릿지는 이 두 영역간에 직렬화된 메세지를 전송 후 역직렬화되어 처리된다.
스레드
사용자가 앱을 실행하면 디바이스는 3개의 메인 스레드와 필요한 경우 백그라운드 스레드를 실행한다.
메인 스레드(UI 스레드)
애플리케이션의 주요 네이티브 스레드.
사용자 인터랙션 및 디바이스 화면의 UI 렌더링을 처리합니다. 이 스레드는 UI 관련 작업을 담당하고, 이벤트 핸들링, UI 업데이트, 애니메이션 처리 등을 처리.
메인 스레드에 무거운 작업을 실행하면 UI가 멈추거나 끊기는 현상이 발생할 수 있기에 JS 번들을 로딩완료시 JS 스레드로 넘긴다.
JS 스레드
JS 코드 실행을 처리.
React Native는 JS 코드를 실행하여 애플리케이션 로직을 처리하고 UI 업데이트를 생성하는데 사용합니다. JS 스레드는 비동기적으로 작업을 처리하며, 이벤트 핸들링, 데이터 가져오기, 비즈니스 로직 실행 등을 담당.
일반적으로 React Native 애플리케이션의 로직은 JS 스레드에서 실행된다.
Shadow 스레드
Shadow 스레드는 React Native의 내부적인 메커니즘으로서 메인 스레드와 JS 스레드 사이에서 작업을 처리하는 역할.
Shadow 스레드는 주로 UI 컴포넌트의 스타일과 레이아웃 계산을 비동기적으로 처리하는 데 사용됩니다.
백그라운드 스레드
백그라운드 스레드는 주로 CPU 집약적인 작업이나 네트워크 요청과 같은 비동기 작업을 처리하는 데 사용.
예를 들어, 이미지 처리, 데이터 가공, 데이터베이스 작업 등은 백그라운드 스레드에서 처리될 수 있고 이렇게 하면 메인 스레드가 차단되지 않고 애플리케이션이 더 응답성이 높은 상태를 유지할 수 있음.
동작 과정
- JS 스레드에서 UI 업데이트 요청 생성
- Shadow 스레드로 업데이트 요청 전달
- Shadow 스레드에서 UI 컴포넌트 스타일과 레이아웃을 계산하고 필요한 경우 메인 스레드로 UI 업데이트 요청 전달.
- 메인 스레드는 UI를 업데이트하고 화면에 반영
