FlatList란 ?
스크롤이 필요한 많은 양의 리스트 아이템을 보여줄때 사용하는 리액트 네이티브 컴포넌트.
ScrollView를 쓰면 되는거 아냐 ?
스크롤뷰와도 함께 쓰는데 용도의 차이점이 있다.
스크롤뷰는 아이템이 화면에서 벗어났을 때 스크롤을 생성하여 스와이프를 통해 벗어난 부분을 하는데 목적이 있고, 출력해야하는 데이터가 고정적이고 많지 않을 때의 사용한다.
- 플랫리스트는 마찬가지로 스크롤을 생성하지만 React의 무한스크롤 기능처럼 한 번에 모든 아이템을 렌더하지 않고, 화면에 보여지는 부분만 렌더링한다는 차이가 있다.
-- 그리하여 데이터의 길이가 정확하지 않고, 데이터 양을 예측할 수 없을때 이를테면 API를 통해 외부 데이터를 가져올때 사용하기에 적합하다.
기본 사용 방법
- FlatList를 사용하려면 두 가지 prop를 꼭 알아야 하는데 data와 renderItem이다.
- data는 만들고자 하는 리스트의 soucre를 담는 prop이다.
- renderItem은 data로 받은 소스들 그 각각의 item들을 render시켜주는 콜백함수이다.
- keyExtractor 는 ReactJS map함수에서 key={idex} 와 해줬듯이 각각의 item에 고유의 키를 주는 것이라 생각하면 된다.
ex) keyExtractor={(item, index) => index.toString()} - FlatList에서는 onEndReached를 통해 유저가 화면의 끝에 도달했을 때 새로운 데이터를 호출(fetch)하여 해당 비효율을 해결할 수 있게한다.
import React from 'react';
import {
SafeAreaView,
View,
FlatList,
StyleSheet,
Text,
StatusBar,
} from 'react-native';
const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
},
];
type ItemProps = {title: string};
const Item = ({title}: ItemProps) => (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
);
const App = () => {
return (
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={({item}) => <Item title={item.title} />}
keyExtractor={item => item.id}
/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: StatusBar.currentHeight || 0,
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 32,
},
});
export default App;참고사이트
핫바리임