[TIL] React Native-FlatList, SectionList

🔊 FlatList component

React에서 사용한 JavaScript의 map method와 동일한 기능을 하는 component이다. map method와 달리 유용한 props들을 사용할 수 있는 장점이 있기 때문에 React Native에서는 map 대신 FlatList component를 사용하여 구현하는 것이 좋다.

// 1. map method
{data.map(el => {
  return (
    <OneItem
      key={el.id}
      content={el.content}
    />
   )
})}

 // 2. FlatList component
 // item이라는 argument 이름은 다른 것으로 바꾸면 안된다.
 // keyExtractor(key)는 string 형태여야 한다.
 
<FlatList
  data={data}
  renderItem={({item}) => {
    <OneItem
      content={item.content}
    />
  }}
  keyExtractor={{item=>String(item.id)}
/>

ScrollView vs FlatList

• ScrollView: 화면에 보여지는 것과 상관없이 ScrollView가 감싸고 있는 모든 Component를 render 한다.
• FlatList: 화면에 보여지는 부분만 render하기 때문에 메모리 최적화를 위해서 사용한다.
  (Pagination 구현할 때 필수로 사용)

🔊 SectionList component

React에서 사용한 JavaScript의 map method를 반복하여 사용한 듯한 효과를 주는 component이다. 페이지 구성시 item 목록들의 분리가 필요한 경우에 (header - listitem) * n개의 효과를 줄 수 있다.

// section title에 해당하는 부분은 renderSectionHeader의 props에 전달한다.

const DATA = [
  {
    title: "Main",
    item: ["Pizza", "Hamburger", "Risotto"]
  },
  {
    title: "Drinks",
    item: ["Water", "Coke", "Beer"]
  }  
] 

    <SectionList
      sections={DATA}
      keyExtractor={(item, index) => item + index}
      renderItem={({ item }) => <Item title={item} />}
      renderSectionHeader={({ section: { title } }) => (
        <Text style={styles.header}>{title}</Text>
      )}
    />