React Native에 자주 사용되는 세 가지 스크롤 컴포넌트를 정리해보았다. ScrollView, FlatList, SectionList 의 각각의 쓰임새와 차이점에 대해 설명해보려고 한다.

1. scrollview

렌더링 해야 되는 컴포넌트가 적을 때 주로 사용한다. 모든 자식 component를 한 번에 렌더링하기 때문에 하위 컴포넌트가 많을 경우(무한스크롤 구현 등) 렌더링 속도 저하, 메모리 사용 증가 등의 성능 이슈가 생길 수 있다.

2. flatlist

렌더링 해야 되는 컴포넌트가 많을 때 사용하며, 무한 스크롤을 구현하기에 적절하다.

무한 스크롤

• scrollview 내부의 flatlist의 경우에는 onEndReached를 호출하지 않는다.
• flatlist에 onEndReached props에 마지막 도달 시 수행 될 이벤트 핸들러를 등록하면 flatlist에서 해당 함수를 호출해준다.

refresh

• 당겨서 refresh 할 때 수행될 함수는 flatlist의 onRefresh 함수에 등록한다.
• onRefresh를 사용하기 위해서 flatlist에 refreshing props가 필수적으로 있어야 하며 통상적으로 useState를 사용하여 구현한다.
  • onRefresh 함수 시작 시 isRefresh를 true로 변경
  • api 호출 후 완료되면 isRefresh를 false로 변경

3. sectionList

• 여러 개의 section이 나뉘어진 flatlist
• 부제목과 렌더링 해야 할 리스트가 있는 경우에 사용하기 적절하다.

요약

	scrollview	flatlist	sectionlist
하위 렌더링 컴포넌트 수	적을 때 사용	제약 X	제약 X
사용처	스크롤이 필요한 view	무한 스크롤(상품 리스트 등)	비슷한 리스트 형태가 반복될 때(설정 페이지 등)