[TIL] 내배캠4기-React Native-67일차 (작성중)

• FlatList
  • ScrollView 와의 차이점

ScrollView

내부의 모든 리스트를 한번에 렌더링 해야함 -> 성능 저하

FlatList

화면에 보이는 리스트만 렌더링 <- 화면에 표시되지 않은 리스트는 메모리에서 제거 => 성능 저하 최소화
무한스크롤 적용 시 적합

셀프 클로징 컴포넌트 - 자식 컴포넌트를 가질 수 없음

필수 prop

renderItem
data

renderItem

type: function
매개변수로 기존에 map으로 돌면서 화면에 뿌려주던 map 안의 콜백함수가 들어간다.
📌 콜백함수의 매개변수를 객체로 감싸준다.
📌 매개변수 이름은 반드시 item 으로!
renderItem={({ item }) => <VCard movie={item} />}

data

type: array

keyExtractor

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}
/>