[Native] FlatList

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 를 사용하여 남은 컴포넌트를 넣어준다.