[React Native] Infinite Scroll with FlatList

많은 데이터 리스트를 렌더링 시켜야 할때 Pagination을 해야할지 Infinite Scroll을 할지 고민에 빠지곤 한다. UX적인 측면도 고려하면서 화면UI 구성도 고려해야하기 때문인데 React Native를 사용하는 앱 개발자라면 사용성, 화면구성에 용이한 Infinite Scroll을 선택 하리라 생각된다.

자 그래서 오늘은 누구나 한번쯤은 거치고 가는 무한스크롤을 만들어 보도록 하자!

우선 flatList의 기초적인 구성을 알아야하기 때문에 FlatList 알아보기 를 클릭하여 기초적인 틀을 보고 오길 바란다.

FlatList의 onEndReached props를 사용하면 스크롤의 끝에 닿았을때 이벤트를 발생 시킬수 있는데, 이걸 활용해서 스크롤의 끝에 닿았을 때마다 새로운 값을 호출하는 함수를 작성해보도록 하자

  //매호출마다 사용할 page값을 업데이트 하기위해 useRef사용
  const page = useRef(0);
  const isLoading = useRef<boolean>(false);
  const [DataList,setDataList] = useState()

  const onEndReached = () => {

    if (10 <= DataList?.length && isLoading.current === false) {
      isLoading.current = true;
      
      //새로운 onEndReached가 호출될 때마다 Page Update
      page.current = page.current + 1;
      
      apiGetData(page.current, 10)
        .then((data) => {
          if (data == null) return;
          if (data.length <= 0) return;
          setDataList((item) => (page.current === 0 ? data : [...item, ...data]));
        })
        .catch((e) => console.log('ee', e.response))
        .finally(() => (isLoading.current = false));
    }
  };

함수가 완성 되었으니 이제 FlatList에 적용해보도록 하자

        <FlatList
          data={DataList}
          renderItem={renderItem}
          ListFooterComponent={() => <View style={{ height: 50 }}></View>}
          onEndReached={onEndReached}
          onEndReachedThreshold={0.6}
        />

자 완성이 되었다.

여기서 한가지 꿀팁은 ListFooterComponent props를 활용해 renderItem 아래에 약간의 여유 공간을 주면 안드로이드 환경에서 더욱 자연스러운 화면을 구성 할수있다. 또한, onEndReachedThreshold props를 사용하면 이벤트 발생시점을 수정 하는것도 가능하다.

자 Infinite Scroll 완성 !