내부의 모든 리스트를 한번에 렌더링 해야함 -> 성능 저하
화면에 보이는 리스트만 렌더링 <- 화면에 표시되지 않은 리스트는 메모리에서 제거 => 성능 저하 최소화
무한스크롤 적용 시 적합
셀프 클로징 컴포넌트 - 자식 컴포넌트를 가질 수 없음
renderItem
data
type: function
매개변수로 기존에 map으로 돌면서 화면에 뿌려주던 map 안의 콜백함수가 들어간다.
📌 콜백함수의 매개변수를 객체로 감싸준다.
📌 매개변수 이름은 반드시 item 으로!
renderItem={({ item }) => <VCard movie={item} />}
type: array
map으로 순회 시 key값이 필수
그 key값을 지정할 수 있는 prop
다른 컴포넌트에서 map 사용 시 내부의 최상위 요소에 key값을 지정해줬으면 됐지만, FlatList는 셀프 클로징 컴포넌트! 따라서 map이 내장되어 있기 때문에 keyExtractor 라는 prop을 쓰는 것이다.
사용예시
📌 keyExtractor={(item) => item.id}
<FlatList
horizontal
contentContainerStyle={{ paddingHorizontal: 20 }}
showsHorizontalScrollIndicator={false}
data={topRateds}
renderItem={({ item }) => <VCard movie={item} />}
keyExtractor={(item) => item.id}
/>