모바일 개발 · 중급
React Native에서 JavaScript 코드와 네이티브 모듈(Java/Kotlin for Android, Objective-C/Swift for iOS) 간의 통신 원리에 대해 설명하고, 네이티브 모듈을 언제 사용해야 하는지 예시를 들어주세요.
힌트 · 브릿지를 통해 직렬화된 메시지를 주고받으며 통신하고, JS에서 접근할 수 없는 하드웨어 기능이나 고성능 네이티브 라이브러리 사용 시 네이티브 모듈을 활용합니다.
BridgeNative ModulesJavaScriptCoreThread성능
모범답안
React Native에서 JavaScript 코드와 네이티브 모듈 간의 통신은 브릿지(Bridge)를 통해 이루어집니다. JavaScriptCore 엔진에서 실행되는 JavaScript 코드는 브릿지를 통해 메시지를 직렬화하여 네이티브 코드로 전달하고, 네이티브 코드 역시 결과를 직렬화하여 JavaScript로 전달합니다. 이 과정은 비동기적으로 처리됩니다.
네이티브 모듈은 JavaScript만으로는 접근하기 어려운 특정 하드웨어 기능(예: 블루투스, 카메라의 고급 기능)을 사용해야 할 때, 또는 고성능이 요구되는 네이티브 라이브러리(예: 이미지 처리, 복잡한 계산)를 활용해야 할 때 사용합니다. 예를 들어, JavaScript로는 구현하기 어려운 특정 플랫폼 API를 사용하거나, JavaScript로 처리하기에는 성능상 병목이 발생하는 복잡한 이미지 처리 로직을 구현할 때 네이티브 모듈을 활용할 수 있습니다.
읽었다면, 이제 직접 답해볼 차례예요
패스잇 앱에서 이 질문에 말로 답하면 AI가 꼬리질문까지 이어가며 1:1 코칭합니다.
함께 보는 React Native 면접 질문
- React Native 애플리케이션에서 `Context API`와 `Redux` (또는 MobX와 같은 전역 상태 관리 라이브러리)의 차이점을 설명하고, 각각 어떤 상황에 더 적합하다고 판단하시나요?
- React Native에서 `StyleSheet.create`를 사용하여 스타일을 정의하는 것이 인라인 스타일이나 일반 JavaScript 객체를 직접 사용하는 것보다 어떤 이점들이 있나요?
- `FlatList` 컴포넌트의 성능을 최적화하기 위한 방법들을 3가지 이상 설명하고, 각 방법이 어떤 원리로 성능 향상에 기여하는지 구체적으로 설명해주세요.
- React Native 애플리케이션에서 발생할 수 있는 일반적인 렌더링 성능 저하 문제를 어떻게 진단하고 해결할 수 있나요? 디버깅 도구(예: Flipper, React DevTools) 활용 방안을 포함하여 설명해주세요.
- React Native 애플리케이션에서 JavaScript Bridge의 병목 현상을 최소화하고 성능을 극대화하기 위한 전략은 무엇이며, 이를 위해 JSI(JavaScript Interface)와 TurboModules이 어떤 역할을 하는지 설명하고, 실제 프로젝트에 적용했던 경험을 바탕으로 구체적인 구현 방안을 제시해 주세요.
- 복잡한 데이터 구조(예: 대용량 이미지 데이터, 파일 스트림, 커스텀 객체 그래프)를 React Native의 JavaScript 환경과 네이티브 모듈(iOS/Android) 간에 효율적으로 전달하고 처리하기 위한 설계 전략을 설명해 주세요. 특히, 이러한 데이터 전송 시 발생할 수 있는 메모리 문제나 스레딩 이슈를 어떻게 관리할 것인지 구체적인 방안을 제시해 주세요.