React Native(RN)는 브라우저와는 다르게 스크롤링이 자동 지원되지 않는다.
그래서 스크롤이 필요한 Container에는 별도로 ScrollView나 Flat 리스트를 사용해야 하는데 두 컴포넌트 모두 스크롤을 지원한다는 점에서는 같으나 약간의 차이점이 있다.
ScrollView 같은 경우에는 화면에 페인팅 되지 않더라도 모든 자식요소를 한 번에 렌더링하기 때문에 성능 저하 이슈가 생길 수 있다.
즉 정적이고 스크롤링이 필요한 아이템이 적을 때 사용할 수 있다.
이럴때 FlatList를 사용하는데, FlatList는 Lazy-loading을 지원하여 화면에 보이지 않는 Item들을 나중에 불러들인다.
FlatList는 무한 스크롤 및 많은 요소들을 lazy하게 렌더링하려는 경우에도 편리하다.
다만 사용함에 있어 일반 React와는 다른 부분이 있다.
<View>
<FlatList
data={goalList}
renderItem={itemData => {
return (
<View style={styles.goal}>
<Text style={styles.goalText}>{itemData.item.text}</Text>
</View>
)
}}
keyExtractor={(item,index) => {
return item.id
} }
alwaysBounceVertical={false} >
</FlatList>
</View>
);
}먼저 ScrollView와 같이 부모 컨테이너로 스크롤링이 필요한 부분을 덮어주고 mapping할 state를 data props로 넘겨준다.
그 다음 renderItem 프롭스에 콜백함수로 컴포넌트를 구성한다. 이 부분은 맵과 같다.
다만 key props를 사용하는게 아니라 keyExtractor props를 통해 key를 생성해주어야 한다.
