TIL_[ReactNative] FlatList

FlatList

많은 양의 아이템 리스트를 보여주고자 할 때 사용하는 React Native 컴포넌트

• react 에서는 map함수를 이용한 렌더링이 있었다면, react native는 FlatList 가 있다.

<Flatlist 
	data={data} 
	renderItem{({item})=> {
		<OneItem content={item.content}/>
}}
 keyExtractor={item=>item.id} 
/>

ScrollView vs FlatList

⇒ 렌더링 차이

ScrollView

• 화면에 보여지는 것과 상관없이 ScrollView 가 감싸고 있는 모든 요소를 render 한다.
• 한 번에 데이터를 다 받아오기 때문에
  데이터가 고정된 경우나, 데이터가 크지 않을 경우는 효과적

FlatList

• 화면에 보여지는 부분만 render 한다.
  그렇기 때문에 성능 최적화의 차이가 있을 수 있다.
• 방대한 데이터나, 고정적이지 않은 계속 데이터를 업데이트해서 렌더 할 때 효과적