[React Native] React Native에서 useInfiniteQuery를 사용하여 무한 스크롤 구현하기: InfinityFlatList

안녕하세요. 오늘은 React Native의 FlatList를 통한 무한스크롤을 구현하는 방법을 소개하고자 합니다. 

 

React Native에서 제공하는 FlatList에서 무한 스크롤 기능을 갖춘 InfinityFlatList 컴포넌트를 만들었습니다. (네이밍은 제 마음대로..)

이 컴포넌트는 FlatList와 유사한 기능을 제공하면서 React Query useInfiniteQuery의 Properties과 병합해 사용자가 리스트의 끝까지 스크롤할 때 추가 데이터를 자동으로 로드하는 기능을 갖추고 있습니다.

 

이 글에서는 InfinityFlatList 컴포넌트의 구현 과정을 안내하고 React Native 프로젝트에서 어떻게 사용할 수 있는지 설명하겠습니다.

---

시작하기

먼저, InfinityFlatList 컴포넌트의 코드를 살펴보겠습니다. 이 컴포넌트는 FlatList 컴포넌트와 유사한 방식으로 데이터를 렌더링 합니다. 아래는 InfinityFlatList 컴포넌트의 코드입니다.

import React from 'react';
import { FlatList, FlatListProps, RefreshControl } from 'react-native';

import { Spinner } from 'native-base';

import useRefreshing from '@hooks/useRefreshing';
import { QueryKey } from '@tanstack/react-query';

export interface InfiniteFlatListProps<T> extends FlatListProps<T> {
  queryProps: {
    queryKey: QueryKey[] | QueryKey;
    hasNextPage?: boolean;
    isFetchingNextPage: boolean;
    fetchNextPage: () => void;
  };
}
const InfiniteFlatList = <T,>({
  data,
  queryProps,
  ...basisProps
}: InfiniteFlatListProps<T>) => {
  const refresh = useRefreshing();
  const { queryKey, hasNextPage, isFetchingNextPage, fetchNextPage } =
    queryProps;

  const isEmpty = data?.length === 0;

  const loadMoreData = () => {
    if (!hasNextPage || isFetchingNextPage) return;
    fetchNextPage();
  };

  return (
    <FlatList
      data={data}
      bounces={!isEmpty}
      indicatorStyle="black"
      scrollIndicatorInsets={{ right: 1 }}
      ListFooterComponent={isFetchingNextPage ? <Spinner /> : null}
      contentContainerStyle={{ flexGrow: 1 }}
      onEndReachedThreshold={0.2}
      onEndReached={loadMoreData}
      refreshControl={
        <RefreshControl
          refreshing={refresh.isRefresh}
          onRefresh={refresh.onRefresh(queryKey)}
          colors={['#67CF71']}
          tintColor={'#67CF71'}
        />
      }
      {...basisProps}
    />
  );
};

export default InfiniteFlatList;

 

---

컴포넌트 설명

InfinityFlatList 컴포넌트는 FlatList의 기능을 확장하고 추가적인 기능을 제공합니다. 아래는 이 컴포넌트에서 사용되는 주요 속성들입니다: 

• data: 렌더링할 데이터 배열입니다. 
• queryProps: 
  데이터를 가져오는 데 필요한 쿼리 관련 props 데이터 로딩 및 추가 데이터 로드에 필요한 속성들을 담은 객체입니다. React Query의 useInfiniteQuery에서 제공하는 props입니다. 속성들의 자세한 설명은 TansStack 문서를 참고하시길 바랍니다.
  
  • queryKey: 데이터를 가져오는 데 사용할 쿼리 키
  • hasNextPage: 더 많은 페이지가 있는지 여부
  • isFetchingNextPage: 다음 페이지를 가져오는 중인지 여부
  • fetchNextPage: 다음 페이지를 가져오는 함수

 

* RefreshControl 

InfinityFlastList 컴포넌트에서 구현한 데이터를 갱신시키는 로직은 아래 링크를 참고해주세요.

[React Native] 리액트 네이티브에서 데이터 무효화와 새로고침 기능을 제공하는 useRefreshing hook 소개

 

---

사용예시

InfinityFlatList 컴포넌트를 사용하는 방법은 다음과 같습니다.

 

1. 필요한 패키지를 import 합니다.

import InfiniteFlatList from './InfinityFlatList';

 

2. 데이터와 쿼리 관련 props를 설정합니다.

React Query useInfiniteQuery의 Properties들을 넣어주셔도 되고, React Query를 쓰지 않으신다면 직접 로직을 구현한 함수를 넣어주셔도 됩니다. 

const data = [...]; // 데이터 배열
const queryProps = {
  queryKey: 'myQueryKey', // 쿼리 키
  hasNextPage: true, // 더 많은 페이지가 있는지 여부
  isFetchingNextPage: false, // 다음 페이지를 가져오는 중인지 여부
  fetchNextPage: () => {
    // 다음 페이지를 가져오는 로직을 구현합니다.
  },
};

 

3. InfinityFlatList 컴포넌트를 렌더링 합니다

InfinityFlatList 컴포넌트는 FlatList의 모든 props를 지원하며, 추가적인 무한 스크롤 및 새로고침 기능을 제공합니다. 

<InfinityFlatList
  data={data}
  queryProps={queryProps}
  renderItem={({ item }) => {
    // 각 항목을 렌더링하는 로직을 구현합니다.
  }}
  // FlatList의 모든 props를 사용할 수 있습니다.
  ItemSeparatorComponent={CreateItemSeparator({ my: '15px' })}
  ListEmptyComponent={
    <EmptyData
	icon={
	<CustomIcon
	name="AlertCircleIcon"
	size={50}
	color={'gray.300'}
	/>
	}
	text={'데이터 없음.'}
    />
  }
/>

 

 

---

마무리 

이번 글에서는 React Native에서 무한 스크롤 기능을 가진 InfinityFlatList 컴포넌트를 만드는 방법에 대해 알아보았습니다. 이 컴포넌트를 사용하면 많은 양의 데이터를 효율적으로 처리하면서도 사용자 친화적인 무한 스크롤 기능을 구현할 수 있습니다. 이제 InfinityFlatList를 활용하여 더 나은 사용자 경험을 제공하는 앱을 개발해 보세요!