[리액트네이티브] FlatList VS ScrollView 너넨 모양

 

전체코드는 좀 복잡시럽게 길지만, 아무튼 FlatList에 대해 정리하면

 

우리가 ScrollView를 안쓰고, FlatList를 사용해야 하는 이유??

ScrollView는 모든 자식 컴포넌트를 렌더링하는데 FlatList는 화면에 보여지는 것만 신경쓴다. 

(= 레이지로딩 : 레이지로딩은 페이지를 읽어들이는 시점에 중요하지 않은 리소스를 나중에 로딩하는 기술이다. 따라서 중요하지 않은 리소스들은 필요할 때 로드가 되어야 한다. )

 

* FlatList는 자체에 map이 내장되어 있지만, map 돌릴때 Key 넣어줬던 것 대신 KeyExtractor를 지정해줘야 한다.

* scrollview와 다르게 onRefresh만 넣어줘도 알아서 비활성화됏다고, onRefresh되면 활성화된다.

* data : 어떤 데이터 뽑을건지(어떤 데이터 Map으로 뽑을건지)

* renderItem : 기존 map으로 뽑았었던 콜백함수 ( 무조건 'item'이라고 해서 뽑아야됌, 넘겨줄때도 그래야게찡 )

 

 <FlatList
        refreshing={isRefreshing}
        onRefresh={onRefresh}
        ListHeaderComponent={
          <>
            <Swiper height="100%" showsPagination={false} autoplay loop>
              {nowPlayings.map((movie) => (
                <TopSlide movie={movie} key={movie.id} />
              ))}
            </Swiper>
            <MidKingView>
              <MidTopTitle>
                <Text>Top Rated Movies</Text>
              </MidTopTitle>
              <FlatList
                contentContainerStyle={{ paddingHorizontal: 10 }}
                horizontal
                showsHorizontalScrollIndicator={false}
                data={topRated}
                renderItem={({ item }) => <MidSlide movie={item} />}
                keyExtractor={(item) => item.id}
                ItemSeparatorComponent={<View style={{ width: 10 }} />}
              />
            </MidKingView>
            <BottomTopTitle>
              <Text>Upcoming Movies</Text>
            </BottomTopTitle>
          </>
        }
        data={Upcoming}
        renderItem={({ item }) => <BottomSlide movie={item} />}
        keyExtractor={(item) => item.id}
        ItemSeparatorComponent={<View style={{ height: 10 }} />}
      />