React-Native) FlatList

< FlatList >

RN에서 많은 양의 데이터를 처리할때는 FlatList나 ScrollView 를 주로 사용한다. 화면보다 데이터의 양이 많을 경우 두 태그는 모두 스크롤을 생성한다는 공통점이 있다.

< ScrollView >는 데이터를 한번에 모두 렌더링하고(느려짐) 화면이 벗어났을 때 스크롤을 생성하기 때문에 데이터가 고정적이고 양이 많지 않을 때 사용하기 적절하다. 반면에, < FlatList >는 모든 데이터를 한번에 렌더링하지 않고 화면에 보여지는 부분만 렌더링해주므로 데이터의 양을 예측할 수 없는 경우에 (크기를 알 수 없을 때) 사용하면 좋다.

< FlatList > 에서 최소한으로 필요한 prop은 data(배열형태 데이터) 와 renderItem 이다.

< FlatList > 의 props를 살펴보면,
data= {DATA} 객체타입의 data 정보를 받고
renderItem에서 renderItem 함수를 호출해서 data가 보여지는 리턴값을 가져온다. 고유 key를 지정해주기 위해 keyExtractor를 설정한다.renderItem에서 map을 돌리는 것 처럼 item을 전달할때,
무조건 {item}으로 써야한다. 다른 이름을 주고 싶다면 el.item에서 el부분을 바꿀수 있다.

FlatList와 유사한데 section을 구분짓고 싶다면 < SectionList >를 사용한다. 

[sectionList 자세히 보기]((https://reactnative.dev/docs/sectionlist)