React Native에서 리스트 최적화하기: ScrollView vs. FlatList

React Native에서 리스트를 렌더링할 때 ScrollView와 FlatList라는 두 가지 컴포넌트가 있다. 이 글에서는 각 컴포넌트의 특징과 차이점을 정리하고, 어떤 경우에 어떤 컴포넌트를 사용해야 하는지 알아보자.

ScrollView란?

ScrollView는 모든 자식 요소를 한 번에 렌더링하는 컴포넌트다. 즉, 리스트의 모든 아이템을 메모리에 로드하므로 작은 목록이나 정적 콘텐츠를 표시하는 데 적합하다.

특징

간단한 사용법: JSX 내부에서 바로 배열을 매핑하여 사용 가능
모든 항목을 한 번에 렌더링하여 빠르게 접근 가능
성능 문제: 아이템 개수가 많아지면 메모리 사용량 증가로 앱이 느려질 수 있음

ScrollView의 한계

높이 제한 필수: ScrollView는 내부 요소의 높이가 제한되지 않기 때문에, 반드시 부모 컨테이너의 높이가 명확해야 한다. flex: 1을 적절히 사용하지 않으면 레이아웃 오류가 발생할 수 있다.
동적 데이터 처리 미흡: 새 데이터가 추가될 때 모든 아이템을 다시 렌더링해야 함
성능 최적화 기능 부족: keyExtractor, getItemLayout 같은 최적화 기능 없음

FlatList란?

FlatList는 화면에 보이는 항목만 렌더링하여 메모리 사용량을 줄이는 컴포넌트다. 스크롤할 때 필요한 아이템만 로드하는 방식으로 성능을 최적화한다.

특징

렌더링 최적화: 보이는 아이템만 렌더링하여 성능 향상
keyExtract를 통해 고유한 키를 설정 가능
getItemLayout을 사용해 리스트 스크롤 성능 개선 가능
대량 데이터 처리 가능: 동적 리스트, API 데이터 목록 등에 적합
FlatList는 단순한 리스트가 아니라 추가적인 기능도 제공 (구분선, 다중 열, 무한 스크롤 등)

FlatList 주요 프로퍼티

프로퍼티	설명
`data`	리스트의 데이터 배열을 설정
`renderItem`	각 항목을 렌더링하는 함수 (item을 받아 JSX 반환)
`keyExtractor`	각 항목의 고유 키를 설정하는 함수
`getItemLayout`	리스트 아이템의 크기를 미리 지정하여 빠른 스크롤 가능
`initialNumToRender`	초기 렌더링할 아이템 개수 지정
`removeClippedSubviews`	보이지 않는 아이템을 메모리에서 제거하여 성능 향상
`onEndReached`	리스트 끝에 도달했을 때 실행할 함수 (무한 스크롤 구현 가능)

ScrollView vs. FlatList 비교

	ScrollView	FlatList
렌더링 방식	모든 아이템을 한 번에 렌더링	화면에 보이는 아이템만 렌더링
성능 최적화	❌	✅
사용 예	정적 데이터, 작은 리스트	동적 데이터, 대규모 리스트
메모리 사용량	리스트 크기에 비례하여 증가	필요한 경우에만 메모리 사용
추가 기능	❌	✅ (구분선, 다중 열, 무한 스크롤 등)

결론: 어떤 것을 선택해야 할까?

간단한 리스트 → ScrollView 사용
대량의 데이터 → FlatList 사용

처음 React Native를 배우는 입장에서 ScrollView는 사용하기 쉽지만, FlatList를 적절히 활용하면 성능을 훨씬 개선할 수 있다. FlatList의 최적화 기법과 추가 기능을 활용하면 성능과 유지보수 측면에서 훨씬 효율적인 앱을 만들 수 있다. 상황에 맞게 적절한 컴포넌트를 선택하자!