Flat List

렌더링 되는 양이 넘어서 화면을 넘어갈 때는

스크롤을 해서 넘어갈 수 있어야 한다.

• ScrollView
• FlatList

두가지 방법이 있다.

먼저 ScrollView 컴포넌트

import { Button, StyleSheet, View, Text, ScrollView } from 'react-native';

const ListScreen = ({ navigation, route }) => {
	const todos = [];
	for (let i = 1; i < 501; i++) {
		todos.push({ id: i, task: `task ${i}` });
	}

	return (
		<ScrollView style={styles.container}>
			{todos.map(item => {
				console.log(item.id);
				return (
					<View
						key={item.id}
						style={{ paddingHorizontal: 20, paddingVertical: 20 }}
					>
						<Text>{item.task}</Text>
					</View>
				);
			})}
		</ScrollView>
	);
};

const styles = StyleSheet.create({
	container: {
		flex: 1,
	},
});

export default ListScreen;

FlatList 컴포넌트 사용법

return (
	<FlatList
		data={todos}
		renderItem={({ item }) => {
			console.log(item.id);
			return (
				<View
					key={item.id}
					style={{ paddingHorizontal: 20, paddingVertical: 20 }}
				>
					<Text>{item.task}</Text>
				</View>
			);
		}}
	/>
);

위와 같이 사용하면 되고,

item 값을 가져와서 사용할 수 있음

key를 설정할 필요가 없어짐.

key를 임의로 설정하고 싶다면 keyExtractor 라는 걸 가져와서 반환할 수 있다.

• Scroll View는 한번에 다가져옴 (양이 정해져 있을 때)
• FlatList는 적당히 가져온 후 계속 가져옴 (양이 많을 때)

windowSize

Flat List에서는 windowSize라는 Props가 있음

기본값은 21인데

이는 prev 10, curr 1, next 10 개 임을 말함.

이전페이지 + 다음 페이지 + 현재 화면 (0 + 1 + 10 ) * 10

windowSize를 5로 설정하면

prev : 2, curr:1 , next: 2

이런식이고 그러면, (0+1+2) * 10 = 31

ListHeaderComponent

<FlatList
	data={todos}
	renderItem={({ item }) => <ListItem item={item} />}
	keyExtractor={item => String(item.id)}
	windowSize={5}
	ItemSeparatorComponent={Separator}
	ListHeaderComponent={() => <View style={{ height: 10 }}></View>}
/>

아니면 아래와 같이도 사용할 수 있다.

ListHeaderComponent={View}
ListHeaderComponentStyle={{ height: 10 }}

아무튼, Header에 컴포넌트를 주는 것임.

마찬가지로 ListFooterComponent, Style 둘다 있다.