모바일 개발 · 중급
`FlatList` 컴포넌트의 성능을 최적화하기 위한 방법들을 3가지 이상 설명하고, 각 방법이 어떤 원리로 성능 향상에 기여하는지 구체적으로 설명해주세요.
힌트 · `getItemLayout`, `keyExtractor`, `initialNumToRender`, `windowSize`, `removeClippedSubviews` 등을 활용하여 불필요한 렌더링을 줄일 수 있습니다.
keyExtractorgetItemLayoutPureComponentshouldComponentUpdatewindowSize
모범답안
FlatList 성능 최적화에 대해 말씀드리겠습니다.
첫째, keyExtractor prop을 사용하여 각 항목에 고유한 키를 제공하는 것입니다. 이는 React가 목록의 변경 사항을 효율적으로 추적하고 불필요한 컴포넌트 재생성을 방지하는 데 도움이 됩니다.
둘째, getItemLayout prop을 활용하는 것입니다. 이 prop을 사용하면 FlatList가 항목의 높이와 같은 레이아웃 정보를 미리 알 수 있어, 스크롤 시 항목의 위치를 계산하는 데 드는 비용을 줄일 수 있습니다. 특히 항목 높이가 일정할 때 효과적입니다.
셋째, initialNumToRender와 windowSize prop을 적절히 설정하는 것입니다. initialNumToRender는 초기 렌더링 시 보여줄 항목 수를, windowSize는 화면 밖에 있는 항목 중 렌더링할 항목 수를 조절합니다. 이를 통해 화면에 보이지 않는 항목의 렌더링을 최소화하여 메모리 사용량과 렌더링 시간을 줄일 수 있습니다.
읽었다면, 이제 직접 답해볼 차례예요
패스잇 앱에서 이 질문에 말로 답하면 AI가 꼬리질문까지 이어가며 1:1 코칭합니다.
함께 보는 React Native 면접 질문
- React Navigation 라이브러리에서 `Stack Navigator`와 `Tab Navigator`의 주요 차이점은 무엇이며, 각각 어떤 사용자 경험을 제공할 때 더 적합하다고 생각하시나요?
- React Native 애플리케이션에서 `Context API`와 `Redux` (또는 MobX와 같은 전역 상태 관리 라이브러리)의 차이점을 설명하고, 각각 어떤 상황에 더 적합하다고 판단하시나요?
- React Native에서 `StyleSheet.create`를 사용하여 스타일을 정의하는 것이 인라인 스타일이나 일반 JavaScript 객체를 직접 사용하는 것보다 어떤 이점들이 있나요?
- React Native에서 JavaScript 코드와 네이티브 모듈(Java/Kotlin for Android, Objective-C/Swift for iOS) 간의 통신 원리에 대해 설명하고, 네이티브 모듈을 언제 사용해야 하는지 예시를 들어주세요.
- React Native 애플리케이션에서 발생할 수 있는 일반적인 렌더링 성능 저하 문제를 어떻게 진단하고 해결할 수 있나요? 디버깅 도구(예: Flipper, React DevTools) 활용 방안을 포함하여 설명해주세요.
- React Native 애플리케이션에서 JavaScript Bridge의 병목 현상을 최소화하고 성능을 극대화하기 위한 전략은 무엇이며, 이를 위해 JSI(JavaScript Interface)와 TurboModules이 어떤 역할을 하는지 설명하고, 실제 프로젝트에 적용했던 경험을 바탕으로 구체적인 구현 방안을 제시해 주세요.