패스잇
모바일 개발 · 심화

React Native 애플리케이션에서 JavaScript Bridge의 병목 현상을 최소화하고 성능을 극대화하기 위한 전략은 무엇이며, 이를 위해 JSI(JavaScript Interface)와 TurboModules이 어떤 역할을 하는지 설명하고, 실제 프로젝트에 적용했던 경험을 바탕으로 구체적인 구현 방안을 제시해 주세요.

힌트 · JSI는 JS와 Native 간의 직접 통신을 가능하게 하며, TurboModules는 Bridge 없이 모듈을 정의하여 오버헤드를 줄입니다. 이를 통해 직렬화/역직렬화 비용을 제거하고 호출 속도를 향상시킬 수 있습니다.

JSI (JavaScript Interface)TurboModulesAsyncStorageNative ModulesSerialization/Deserialization

모범답안

React Native에서 JavaScript Bridge 병목 현상을 최소화하고 성능을 극대화하기 위한 핵심 전략은 Native 코드와의 통신 오버헤드를 줄이는 것입니다. 이를 위해 JSI(JavaScript Interface)와 TurboModules가 중요한 역할을 합니다.

JSI는 기존의 비동기 Bridge 대신 JavaScript와 Native 간의 동기적이고 직접적인 함수 호출을 가능하게 합니다. 이를 통해 데이터 직렬화/역직렬화 과정에서 발생하는 비용을 제거하고 통신 속도를 크게 향상시킬 수 있습니다.

TurboModules는 JSI를 기반으로 Native Modules를 재구현한 것으로, Lazy Loading을 지원하고 Bridge를 완전히 우회하여 모듈을 로드하고 호출합니다. 즉, 필요한 Native 모듈만 필요할 때 로드하여 초기 로딩 시간을 단축하고 메모리 사용량을 최적화합니다.

실제 프로젝트에서는 AsyncStorage와 같이 I/O 작업이 빈번한 Native Modules를 TurboModule로 마이그레이션하는 것을 고려할 수 있습니다. 예를 들어, JSI를 사용하여 Native에서 직접 데이터를 읽고 쓰는 비동기 함수를 구현하면, Bridge를 통한 반복적인 데이터 전송 없이 훨씬 빠르게 데이터를 처리할 수 있습니다. 이를 통해 UI 렌더링 성능 저하를 방지하고 사용자 경험을 개선할 수 있습니다.

읽었다면, 이제 직접 답해볼 차례예요

패스잇 앱에서 이 질문에 말로 답하면 AI가 꼬리질문까지 이어가며 1:1 코칭합니다.

함께 보는 React Native 면접 질문

← React Native 면접 질문 전체 보기