📚 Reference
📜 Chapter
Bridge
JSC (JavaScriptCore**)**
JSI (JavaScript Interface)
TurboModules
Main Thread
Worker Thread
React Native - 원리
- 레거시 아키텍처 (Legacy Architecture)
- 새로운 아키텍처 (New Architecture)
레거시 아키텍처 (Legacy Architecture)
- 레거시 아키텍처 (Legacy Architecture)
- The Bridge
- 오랫동안 사용되어 온 기존의 방식
- 기존 방식은 '브릿지(Bridge)'라는 통로를 통해 데이터를 주고받았다.
- 작동 방식
- JS와 네이티브가 서로 이해할 수 있도록 데이터를 JSON 형식으로 직렬화(Serialization)하여 전달한다.
- 메신저로 편지를 주고받는 것과 비슷하다.
- 문제점
- 비동기 처리: 모든 통신이 비동기라 즉각적인 응답이 어렵다. (예: 스크롤 시 화면이 하얗게 뜨는 현상)
- 병목 현상: 데이터가 많아지면(복잡한 애니메이션 등) 브릿지에 과부하가 걸려 앱이 버벅거린다.
- 초기 로딩: 앱이 시작될 때 사용하지 않는 네이티브 모듈까지 한꺼번에 불러와야 해서 실행 속도가 느리다.
- 통신 방식
- 메시지 큐(Message Queue) 방식
- 기존 브릿지 아키텍처는 전형적인 메시지 기반 통신이었다.
- 직렬화(Serialization): JS 데이터를 JSON 형태의 메시지로 변환한다.
- 큐(Queue): 변환된 메시지를 대기열에 넣고 차례를 기다린다.
- 비동기 고정: 메시지를 던져놓고 나중에 응답을 받는 구조라, "지금 당장 값을 가져와!"라는 식의 동기적 처리가 불가능했다.
새로운 아키텍처 (New Architecture)