[ReactNative/RN] React Native FlatList 안에 Header/Footer Component 적용하기

프로젝트 진행중에 페이징 처리로 API를 호출해야 하는 업무를 진행중에 있어,

기존에 ScrollView 안에 map 함수로 랜더링하던 부분을 flatlist로 변경하게 되었는데,

문제는 ScrollView의 헤더 컴포넌트가 있었는데, Scrollview와 Flatlist를 같이 쓰게 되면 에러같은 Warning이 뜨므로

굉장히 불편했다.

 

방법을 찾아보던 중, 이런 고민을 싹 날리게 되는 FlatList의 props가 있었는데

바로

ListHeaderComponent와 ListFooterComponent였다.

 

<FlatList
  data={data}
  keyExtractor={(item, index) => `key-${index}`}
  ListHeaderComponent={() => (
    <SomeComponents>
      ...Some components those need to be on top of the list
    </SomeComponents>
  )}
  ListFooterComponent={() => (
    <SomeComponents>
      ...Some components those need to be below the list
    </SomeComponents>
  )}
  renderItem={({ item, index}) => (somethings)}
/>

기존 ScrollView의 헤더부분에 있던 컴포넌트를 FlatList의 ListHeaderComponent Props로 전달하니 간단하게 해결!