RN_FlatList

📢 FlatList란?

FlatList는 React Native에서 대량의 데이터를 효율적으로 렌더링할 수 있는 컴포넌트.

스크롤 가능한 리스트를 만들 때 사용하며, 성능 최적화가 잘 되어 있어서 많은 아이템을 처리할 때도 빠름.

---

1️⃣ FlatList의 기본 개념

• 효율적 렌더링:
  화면에 보이는 아이템만 렌더링하고, 스크롤할 때 필요한 부분만 동적으로 로딩
• 스크롤 지원:
  세로 또는 가로 스크롤 지원 (horizontal 속성으로 조절 가능)
• 리스트 최적화:
  많은 데이터를 렌더링해도 성능 저하가 적음

---

2️⃣ 기본 사용법

import React from 'react';
import { FlatList, Text, View, StyleSheet } from 'react-native';

const DATA = [
  { id: '1', title: '우유' },
  { id: '2', title: '당근' },
  { id: '3', title: '양파' },
  { id: '4', title: '돼지고기' },
  { id: '5', title: '감자' },
];

const App = () => {
  const renderItem = ({ item }) => (
    <View style={styles.item}>
      <Text>{item.title}</Text>
    </View>
  );

  return (
    <FlatList
      data={DATA}               // ✅ 렌더링할 데이터
      renderItem={renderItem}   // ✅ 각 아이템을 어떻게 렌더링할지 정의
      keyExtractor={(item) => item.id} // ✅ 각 아이템의 고유한 key 설정
    />
  );
};

const styles = StyleSheet.create({
  item: {
    padding: 20,
    marginVertical: 8,
    backgroundColor: '#f9c2ff',
    borderRadius: 8,
  },
});

export default App;

---

3️⃣ 주요 속성 (Props)

속성	설명	예시
data	렌더링할 데이터 배열	data={DATA}
renderItem	각 아이템을 렌더링하는 함수	renderItem={({ item }) => <Text>{item.title}</Text>}
keyExtractor	각 아이템의 고유한 키 설정	keyExtractor={(item) => item.id}
numColumns	리스트를 그리드로 렌더링할 때 열 개수 설정	numColumns={3}
horizontal	가로 스크롤 활성화	horizontal={true}
ListHeaderComponent	리스트의 헤더 추가	ListHeaderComponent={<View><Text>헤더</Text></View>}
onEndReached	스크롤이 끝에 도달했을 때 호출되는 함수	onEndReached={() => loadMoreData()}
refreshing	당겨서 새로고침 기능을 활성화	refreshing={false}
onRefresh	새로고침 시 호출되는 함수	onRefresh={fetchData}

---

4️⃣ FlatList vs ScrollView 차이점

비교 항목	FlatList ✅	ScrollView ❌
성능	보이는 데이터만 렌더링 → 고성능	모든 데이터를 한 번에 렌더링 → 성능 저하
대량 데이터 처리	수천 개의 데이터도 처리 가능	많은 데이터 처리 시 렉 발생 가능
스크롤 방향	세로/가로 지원 (기본: 세로)	세로/가로 지원 (기본: 세로)
리스트 최적화	가상화 처리로 메모리 최적화	최적화 부족

대량의 데이터를 렌더링해야 한다면 항상 FlatList를 사용하는 것이 더 효율적.

---

5️⃣ 3열 그리드 레이아웃 적용 (복습)

<FlatList
  data={DATA}
  renderItem={renderItem}
  keyExtractor={(item) => item.id}
  numColumns={3} // ✅ 한 줄에 3개의 아이템 표시
/>

• numColumns={3}만 추가하면 그리드 형태로 렌더링됨.

---

📢 최종 요약

• FlatList는 React Native에서 리스트를 효율적으로 렌더링하기 위한 컴포넌트

• 많은 데이터를 처리할 때 성능이 우수함

• numColumns로 그리드 레이아웃 쉽게 구현 가능

• 데이터가 많으면 ScrollView 대신 FlatList 사용이 필수!