Flatlist
Flatlist 컴포넌트는 말하자면 스크롤 가능한 리스트라고 볼 수 있다.
나는 메모리스트를 보여주는 데에 사용했다. (grid로도 사용할 수 있다)
- ScrollView
스크롤은 ScrollView로도 가능한데, 왜 사용하지 않았는가? 라고 묻는다면, map함수를 사용하기 귀찮았기 때문이다.
나는 메모리스트를 구현해야하는데 ScrollView를 사용한다면 map함수로 각 메모를 돌려줘야하는데, 이 부분이 귀찮아 그냥 map 기능까지 비슷하게 제공하는 flatlist를 사용했다.
Props
Flatlist를 사용할 때 가장 중요한 두 가지 요소는 data와 renderItem이다.
data: 말 그대로 flatlist에 넣을 데이터를 의미한다.
나는 객체 배열을 사용해서 data에 넣었다. 아래는 내가 넣은 data이다. API에서 데이터 받아오는 부분이 조금 복잡해져서 코드가 이렇게 나왔다.
id, title, date를 가지는 객체의 배열이라고 보면 된다.
const setMemos = (i) => {
memos.push({
id: _noteId[i],
title: _title[i],
date: _date[i]
});
}
setNotes(memos); // notes를 data에 넣음.renderItem:data를 불러오는 callback함수라고 보면 된다.
{ item }은 객체로, render할 data의 item을 의미한다. data가 객체 배열이었으니, item은 그 하나하나의 객체라고 보면 된다.
const renderMemo = ({ item }) => {
return(
<TouchableOpacity style = {boxStyles.memo}
onPress = {() => navigation.navigate('Note', {
noteId: item.id, // data의 id
category: category,
userId: userId
})}>
<View style ={textStyles.InBox}>
<View style = {boxStyles.important} />
<Text style = {{
marginLeft: 10,
fontWeight: 'bold',
}}>
{item.title} // data의 title
</Text>
</View>
<View>
<Text
style = {{ marginLeft: 35 }}
>
{item.date} // data의 date
</Text>
</View>
</TouchableOpacity>
);
}keyExtractor: map 함수의 key값처럼 앞의 item에 key를 주는 거라고 볼 수 있다.
Usage
이제 flatlist를 생성해주면 완성.
<FlatList
data={notes}
renderItem = {renderMemo}
keyExtractor={(item) => item.id}
/>FlatList 생성 화면은 다음과 같다.
Hello, World!