FlatList
scrollView 와 거의 같은 태그.
ScrollView 는 첫 렌더링에 모든 리스트를 렌더링 하지만
FlatList 는 화면에 보여지는 리스트만 렌더링 하여
list 의 content 량이 많다면 비효율 적이다. -> FlatList 사용!
예제
// ScrollView 사용
<TopRatedMovieList
horizontal={true}
showsHorizontalScrollIndicator={false}
>
{topRated.map((movie) => {
return (
<TopRatedMovieSection>
<TopRatedMovieImage
source={{
uri: getImgPath(movie.poster_path),
}}
/>
<TopRatedMovieScriptView>
<TopRatedMovieStar>⭐{movie.vote_average}/10</TopRatedMovieStar>
<TopRatedMovieText>
{movie.title.slice(0, 11)}
{movie.title.length > 11 && "..."}
</TopRatedMovieText>
</TopRatedMovieScriptView>
</TopRatedMovieSection>
);
})}
</TopRatedMovieList>
//FaltList 사용
<FlatList
horizontal
showsHorizontalScrollIndicator={false}
data={topRated}
renderItem={({ item }) => {
return (
<TopRatedMovieSection
onPress={() =>
navigate("Stacks", {
screen: "Detail",
params: { movieId: item.id },
})
}
>
<TopRatedMovieImage
source={{
uri: getImgPath(item.poster_path),
}}
/>
<TopRatedMovieScriptView>
<TopRatedMovieStar>⭐{item.vote_average}/10</TopRatedMovieStar>
<TopRatedMovieText>
{item.title.slice(0, 11)}
{item.title.length > 11 && "..."}
</TopRatedMovieText>
</TopRatedMovieScriptView>
</TopRatedMovieSection>
);
}}
keyExtractor={(item) => item.id}
ItemSeparatorComponent={<View style={{ width: 15 }} />}
/>
FlatList 는 자식을 component 를 가질 수 없다.
대신 안의 인자에 주입을 함.
FlatList 는 기본적으로 .map 역할을 한다.
data = .map 을 돌릴 배열을 대입.
renderItem={({ item }) => {} =
item의 위치는 .map의 안에 movie, text 등의 값인데 무조건 item 만 들어갈 수 있다.
{} 안은 return 값.
그에 따라 movie.id => item.id 로 써야한다.
만약 list 가 아닌 컴포넌트를 포함한 스크롤에 사용해야 한다면
list 인 컴포넌트는 위에 내용 그대로 넣고
ListHeaderComponent 를 사용하여 남은 컴포넌트를 넣어준다.