FlatList로 목록을 어떻게 렌더링하나요?

Question

Accepted Answer

**FlatList**는 데이터의 **스크롤 가능한 목록**을 효율적으로 렌더링하는 React Native 컴포넌트입니다. 항목을 **지연(lazy)** 렌더링(보이는 것만)하여 긴 목록에서도 성능이 좋습니다 — ScrollView에서 데이터를 map하는 것보다 훨씬 낫습니다. ## FlatList — 효율적인 목록 ```jsx import { FlatList, Text, View } from 'react-native'; function UserList({ users }) { return ( item.id} // 항목별 고유 key (중요!) renderItem={({ item }) => ( // 각 항목 렌더링 방법 {item.name} )} /> ); } ``` FlatList는 **data** 배열, **renderItem** 함수(각 항목 렌더링), **keyExtractor**(고유 key)를 받아 항목을 효율적으로 렌더링합니다. ## 왜 FlatList인가 (ScrollView + map이 아니라) ```text ❌ ScrollView + data.map(...) → 모든 항목을 한 번에 렌더링 (화면 밖도) → 긴 목록에서 느리고 메모리 부담 ✅ FlatList → 보이는 항목만 지연 렌더링 (가상화); 스크롤하며 재활용 → 길고 큰 목록에서 성능 좋음 → 사소하지 않은 목록에는 FlatList 사용; ScrollView는 작고 고정된 콘텐츠에만. ``` ## 유용한 FlatList 기능 ```text ✓ onEndReached → 끝 근처 스크롤 시 더 많은 데이터 로드 (무한 스크롤 / 페이지네이션) ✓ refreshing / onRefresh → 당겨서 새로고침 (PULL-TO-REFRESH) ✓ ListHeaderComponent / ListFooterComponent / ItemSeparatorComponent ✓ numColumns → 그리드 레이아웃; horizontal → 수평 목록 ✓ SectionList → 섹션/그룹 목록용 ``` ## 왜 중요한가 FlatList를 이해하는 것은 필수인데, **데이터 목록 표시는 앱에서 거의 보편적인 요구**이고 FlatList가 React Native에서 이를 수행하는 표준적이고 성능 좋은 방법이기 때문에 반드시 알아야 합니다. 거의 모든 앱이 목록(피드, 메시지, 검색 결과)을 보여주며, 이를 효율적으로 하는 것이 중요합니다. 핵심 통찰은 **FlatList가 항목을 지연 렌더링**(보이는 것만, 가상화를 통해, 스크롤하며 재활용)한다는 점으로, 긴 목록에서도 성능이 좋습니다. 반면 흔한 실수인 **ScrollView + `data.map()`**은 모든 항목을 한 번에(화면 밖도) 렌더링하여 긴 목록에서 느려지고 메모리 문제를 일으킵니다. **사소하지 않은 목록에는 FlatList를 사용**(ScrollView는 작고 고정된 콘텐츠에만)하라는 것을 이해하는 것은 실제 성능 문제를 예방하는 중요한 실용 지식입니다. 기본 사용법(고유 key를 위한 `data` 배열, `renderItem` 함수, `keyExtractor`)을 이해하는 것은 목록 렌더링에 필요합니다. **유용한 기능** — `onEndReached`(끝 근처에서 더 많은 데이터를 로드하는 무한 스크롤/페이지네이션, 매우 흔한 요구), 당겨서 새로고침, 헤더/푸터/구분자 컴포넌트, 그리드 및 수평 레이아웃, 그룹 목록을 위한 SectionList — 을 이해하면 앱의 흔한 목록 요구를 다룰 수 있습니다. 목록을 효율적으로 표시하는 것은 거의 보편적인 앱 요구이고 FlatList(지연 렌더링/가상화)가 표준적이고 성능 좋은 React Native 솔루션이며 순진한 ScrollView+map 방식보다 훨씬 낫기 때문에, FlatList를 이해하는 것은 자주 적용되는 필수 React Native 지식입니다. 이는 거의 모든 앱에서 데이터 목록을 표시하는 데 사용되는 핵심 컴포넌트로, 효율적 지연 렌더링과 기능(무한 스크롤, 당겨서 새로고침 등)을 이해하는 것이 성능 좋고 기능하는 목록을 만드는 데 기본인 React Native 개발의 표준 기술입니다.