패스잇
모바일 개발 · 중급

`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 Native 면접 질문 전체 보기