[React Native] 무한스크롤 FlatList, ScrollView

TIL 22.08.29

 

현재 프로젝트에서 무한스크롤을 구현해야하는 기능이 있다.

홈 스크린 상단에는 배너, 검색바, 리스트 필터링하는 버튼들이 있고,

그 아래에 무한스크롤로 구현된 리스트를 렌더링 해야 한다.

 

지난 TIL에서 우선 FlatList와 ScrollView의 차이점부터 알아보았다.

 

서칭해보니 무한스크롤 기능을 위해서는 대부분 FlatList를 사용함을 알 수 있었다.

왜냐하면 FlatList의  onEndReached prop가 리스트 하단에 스크롤이 머문 것을 인식하고 그에 따른 이벤트를 불러올 수 있기 때문이다.

하지만 ScrollView에는 이러한 prop가 없다. 

 

 

처음에는 홈 스크린 전체는 ScrollView로 두고, 내부 리스트를 렌더링하는 부분은 FlatList를 쓰면 되겠다고 생각했다.

<ScrollView>
	<FlatList
    ...
    />
</ScrollView>

이런 식으로 구현하였더니 경고창이 떴다.

virtualizedlists should never be nested inside plain scrollviews with the same orientation

구글링해보니 ScrollView 내부에 FlatList를 중첩하여 쓰면 안된다는 메세지였다.

 

오호.. 그렇구만...

 

 

해결책을 찾아 서칭을 해본 뒤 아래와 같은 방법으로 해결할 수 있었다.

 

FlatList의 ListHeaderComponent prop을 사용하는 것이다.

 

 

필자의 프로젝트에서는 리스트 상단에 컴포넌트들이 위치하고 아래는 없기 때문에 ListFooterComponent 외에 ListHeaderComponent만  사용하였다.

 

const FlatListHeader = () => {
  return (
    <View>
      <HomeHeader />
      <HomeBanner />
      <HomeFilter />
    </View>
  );
};

...
const HomeList = () => {

    return (
        <View>
          <FlatList
            data={data}
            numColumns={2}
            horizontal={false}
            vertical
            ListHeaderComponent={FlatListHeader}
            keyExtractor={item => item.id}
            renderItem={({item}) => (
              ...
            )}
          />
     )
 }

홈 리스트 상단에 들어갈 컴포넌트들을 FlatListHeader 에서 렌더링하고, FlatListHeader를 ListHeaderComponent 값으로 넣어주었다.

필자는 세로로 스크롤되는 column 개수가 2개인 카드뷰를 구현하려고 했기 때문에 

numColumns={2}

horizontal={false}

부분을 추가하였다.

numColumns를 적용하기 위해서는 반드시 horizontal={false} 처리 해주어야 한다.

 

 

무한 스크롤 구현은 추후 백단의 api가 구현된 다음에 할 예정이다.

 

 

 

참고링크

https://stackoverflow.com/questions/58243680/react-native-another-virtualizedlist-backed-container

React-Native another VirtualizedList-backed container