ScrollView/FlatList

Scroll View / FlatList 비교

• ScrollView는 렌더링 시 모든 것을 한번에 렌더링한다. 많은 양의 리스트가 있을 경우 성능이 저하되는 문제를 야기할 수 있음.

• FlatList의 경우 항목이 나타나려고 할 때 렌더링을 할 수 있어 메모리의 사용량을 줄일 수 있으며, 여러열이나 무한 스크롤 로딩과도 상호작용하기 쉽다.

• Flatlist 컴포넌트는 JS에서의 map 함수 역할과 비슷하나 더 많은 기능을 내포하고 있어 React-native 에서 많이 쓰이는 컴포넌트이다.

데이터의 길이가 가변적이고, 데이터의 양을 예측할 수 없는 경우 (API를 통해 외부에서 크기를 알 수 없는 데이터를 가져오는 경우)에 사용하기 적절하다.

FlatList 사용법

• Flatlist를 사용하려면 두 가지 prop를 꼭 알아야 하는데
  data와 renderItem이다.

• data는 만들고자 하는 리스트의 source를 담는 prop이다.

• renderItem은 data로 받은 소스들 그 각각의 item들을 render 시켜주는 콜백 함수이다.

• keyExtractor 는 ReactJS map함수에서 key={idex} 와 해줬듯이 각각의 item에 고유의 키를 주는 것이라 생각하면 된다.

Flatlist 사용법은 data props에 배열에 해당하는 data를 넣고, renderItem props에 실제 렌더할 컴포넌트를 넣어준다.