📱 React Native: ScrollView vs FlatList 차이점 정리

React Native에서 스크롤 가능한 UI를 만들 때는 ScrollView 또는 FlatList를 사용할 수 있습니다.
두 컴포넌트는 유사해 보이지만, 렌더링 방식, 성능, 사용 목적에 따라 분명한 차이가 있습니다.

---

✅ ScrollView

• 모든 자식 컴포넌트를 한 번에 렌더링합니다.
• 데이터 양이 적은 화면에서 사용하는 것이 적절합니다.
• 고정된 요소들을 수직 또는 수평 스크롤할 수 있도록 할 때 자주 사용됩니다.
• 내부 요소가 많아질수록 메모리 사용량이 증가하고 성능 저하가 발생할 수 있습니다.

예시 코드

<ScrollView>
  <Text>Item 1</Text>
  <Text>Item 2</Text>
  <Text>Item 3</Text>
</ScrollView>

---

✅ FlatList

• 보이는 영역만 렌더링하는 가상화(Virtualization) 기술을 사용합니다.
• 수백 개 이상의 아이템을 렌더링할 때에도 메모리 효율이 뛰어납니다.
• renderItem, keyExtractor, ListHeaderComponent 등 리스트 UI에 특화된 기능들을 제공합니다.
• 동적 데이터 렌더링 및 무한 스크롤에 적합합니다.

예시 코드

<FlatList
  data={goals}
  renderItem={({ item }) => <Text>{item}</Text>}
  keyExtractor={(item, index) => index.toString()}
/>

---

🧠 정리

항목	ScrollView	FlatList
렌더링 방식	전체 렌더링	가상화 렌더링 (보이는 아이템만)
성능	요소가 많을수록 느려집니다	대량 데이터에도 성능 저하가 적습니다
메모리 사용	높습니다	낮습니다
적합한 용도	정적인 콘텐츠, 소량 데이터	동적 콘텐츠, 대용량 리스트
제공 기능	단순 스크롤 기능만 제공	renderItem, keyExtractor, onEndReached 등 리스트 전용 기능 제공
커스터마이징	View처럼 자유롭게 배치 가능	리스트 중심 구조로 제한이 있습니다

---

✅ 결론

• 소량의 정적인 콘텐츠를 스크롤할 경우에는 ScrollView를 사용하는 것이 간단하고 효율적입니다.
• 대량의 동적 리스트 데이터를 렌더링할 경우에는 FlatList를 사용하는 것이 성능과 메모리 측면에서 유리합니다.