📄 47. React Native 리스트 성능 최적화 전략 — FlatList, SectionList, memo까지

---

React Native에서 리스트 렌더링은
뉴스 피드, 메시지, 상품 목록 등
앱의 거의 모든 주요 기능에서 사용된다.

하지만 리스트가 많아지고 복잡해질수록
스크롤이 끊기거나, 이미지가 깜빡이거나, 앱이 느려지는 현상이 생긴다.

이번 글은 실제로 자주 겪는 리스트 성능 이슈와 해결 전략을 정리한 글이다.

---

✅ FlatList vs ScrollView

항목	ScrollView	FlatList
데이터 개수	적은 수	많은 수
렌더링 방식	전체 렌더링	화면에 보이는 항목만 렌더링
성능	낮음	높음 (가상화)

🧠 리스트에 10개 이상 아이템이 있다면 무조건 FlatList를 쓰자!

---

🧩 FlatList 기본 구조

<FlatList
  data={data}
  renderItem={({ item }) => <ItemCard item={item} />}
  keyExtractor={(item) => item.id.toString()}
  initialNumToRender={10}
  maxToRenderPerBatch={10}
/>

주요 속성

• data: 렌더링할 배열
• renderItem: 아이템 하나씩 그리는 함수
• keyExtractor: 각 아이템의 고유 key 설정 (필수!)
• initialNumToRender: 처음 렌더링할 아이템 수
• maxToRenderPerBatch: 추가 렌더링할 최대 수

---

🧠 성능 최적화 전략

전략	설명
keyExtractor 최적화	고유한 string 또는 id 반환
shouldComponentUpdate or memo()	불필요한 리렌더링 방지
getItemLayout	고정 높이일 경우 위치 계산 최적화
removeClippedSubviews	화면 밖 컴포넌트 제거
windowSize	렌더링 범위 조절 (기본값: 21)

---

✨ 컴포넌트 메모이제이션

const ItemCard = React.memo(({ item }) => {
  return <Text>{item.name}</Text>;
});

✅ 같은 아이템이면 다시 렌더링하지 않음
✅ 리스트에 많은 아이템이 있을수록 효과 큼

---

🧩 SectionList도 적극 활용

<SectionList
  sections={[
    { title: '오늘', data: todayItems },
    { title: '어제', data: yesterdayItems },
  ]}
  renderItem={({ item }) => <Text>{item.name}</Text>}
  renderSectionHeader={({ section }) => <Text>{section.title}</Text>}
/>

✅ 날짜별, 카테고리별 분리
✅ 내부적으로도 FlatList 기반이므로 성능 좋음

---

💡 실전 팁

상황	전략
이미지가 깜빡인다	FastImage 사용 + memo 적용
렌더링이 느리다	getItemLayout 설정
스크롤이 버벅인다	initialNumToRender, maxToRenderPerBatch 조정
리스트 내부 상태 관리 어렵다	Zustand로 상태 분리

---

📝 내가 느낀 점

초기에 ScrollView만 써서 상품 리스트를 만들었는데,
스크롤이 너무 버벅이고 이미지가 계속 깜빡였다.
FlatList로 바꾸고, memo + keyExtractor 최적화만 했는데
사용자 반응 속도, 스크롤 부드러움이 체감될 정도로 좋아졌다.

이제는 리스트가 10개만 넘어가도 FlatList + 성능 전략을 기본으로 깔고 간다.

---

📄 “앱의 체감 성능은 리스트 렌더링에서 갈린다.”

---