React Query(리액트 쿼리) - Paginated Queries

이번 글에서는 React Query의 Paginated Queries에 대해서 알아보겠습니다.

코드와 예제 결과는 Codesandbox에서 직접 확인할 수 있습니다.

Paginated Queries

React Query는 여러 페이지로 나누어진 데이터를 가져오는 페이지네이션 기능을 매우 쉽게 구현할 수 있습니다. 페이지 번호를 queryKey에 포함시킴으로써, 각 페이지를 하나의 개별적인 쿼리로 처리할 수 있습니다. 하지만 기본적으로 페이지가 바뀔 때마다 새로운 데이터가 로드되면서 UI가 깜빡이는 현상이 발생할 수 있습니다. 이를 해결하기 위해 placeholderData와 keepPreviousData 기능을 사용할 수 있습니다.

기본적인 페이지네이션 처리

React Query에서 페이지네이션 쿼리를 구현하는 기본적인 방법은 queryKey에 페이지 정보를 포함시키는 것입니다. 다음 코드는 페이지 번호에 따라 데이터를 요청하는 페이지네이션 쿼리입니다.

const { data: posts } = useQuery({
  queryKey: ["POSTS", { page }],
  queryFn: async () => {
  	// 300ms는 예제에서 지연시간을 발생시키기 위해 넣은 것입니다.
    await new Promise((resolve) => setTimeout(resolve, 300));
    return getPostsApi({ page, pageSize: 5 });
    // placeholderData: keepPreviousData,
  },
});

이 코드에서는 queryKey에 페이지 번호를 포함하여 페이지가 바뀔 때마다 새로운 데이터를 요청합니다. 하지만, 이 방식만으로는 페이지가 변경될 때마다 UI가 로딩 상태로 전환되어 이전 페이지의 데이터가 사라졌다가 새로운 데이터가 로드될 때 다시 나타나는 현상이 발생할 수 있습니다.

사용자 경험을 향상시키는 페이지네이션

페이지 전환 시 이전 데이터가 유지되면서 새로운 데이터가 로드될 때 UI가 깜빡이는 것을 방지하기 위해 React Query는 placeholderData와 keepPreviousData라는 기능을 제공합니다. 이를 통해 UI가 항상 연속적으로 데이터를 보여줄 수 있으며, 새로운 페이지 데이터를 기다리는 동안 이전 페이지의 데이터를 유지할 수 있습니다.

  const { data: posts } = useQuery({
    queryKey: ["POSTS", { page }],
    queryFn: async () => {
      // 300ms는 예제에서 지연시간을 발생시키기 위해 넣은 것입니다.
      await new Promise((resolve) => setTimeout(resolve, 300));
      return getPostsApi({ page, pageSize: 5 });
    },
    placeholderData: keepPreviousData,
  });

예제 코드의 주석처리 되어 있는 부분을 해제하고 실행 결과를 비교해보세요. 그러면 페이지가 바뀔 때 이전 페이지의 데이터가 유지되면서 페이지가 전환되는 것을 확인할 수 있습니다.