2019-06-12 TIL
2019-06-12
React Native
udemy 강의 수강 중
ScrollView는 포함하는 모든 내용을 한번에 렌더한다. 성능상 문제가 생길 수 있음.
FlatList 컴포넌트를 사용해 해결한다.
const placesOutput = places.map((place, i) => (
<ListItem
key={i + place}
placeName={place}
onItemPressed={() => onItemDeleted(i + place)}
/>
));위 코드처럼 list 배열을 만들기 위해 매뉴얼하게 mapping할 필요가 없어진다.
대신 data, renderItem 속성을 이용한다.
<FlatList
style={styles.listContainer}
data={places} // listing할 데이터 배열
renderItem={info => ( // 각 item을 어떻게 렌더할 지 정함
<ListItem // 따로 만든 ListItem 컴포넌트로 렌더한다
placeName={info.item.value} // 내용은 info.item 에서, 정의한 value속성을 가져옴
onItemPressed={() => onItemDeleted(info.item.key)} // 지울때 필요한 key값도 정의해둔 key속성 가져옴
/>
)}
/>
...
// data에 넘겨준 배열은 이렇게 정의함
[{
key: String(Math.random()),
value: placeName
}, {}, ..]주석이 syntax highlighting을 깨뜨리네..
