TIL - TanStack Query 무한 스크롤 커스텀 훅 리팩토링

오늘은 무한 스크롤 로직을 재사용 가능한 커스텀 훅으로 리팩토링했습니다.

배경

기존 코드에서 인기 영화, 현재 상영 영화, 상영 예정 영화 등을 각각의 훅에서 무한 스크롤로 불러오는 로직이 중복되어 있었습니다.

작업 내용

• useInfiniteScroll 커스텀 훅을 생성하여 무한 스크롤 로직을 추출
• usePopularMovies, useNowPlayingMovies, useUpcomingMovies 훅에서 useInfiniteScroll 훅을 재사용하여 코드 중복 제거

코드 예시

// 변경 전 무한 스크롤 
export const usePopularMovies = () => {
  return useInfiniteQuery<
    MovieResponse,
    Error,
    InfiniteData<MovieResponse>,
    string[],
    number
  >({
    queryKey: ["popularMovies"],
    queryFn: ({ pageParam = 1 }) => api.movie.fetchPopularMovies(pageParam),
    initialPageParam: 1,
    getNextPageParam: (lastPage) => {
      if (lastPage.page < lastPage.total_pages) return lastPage.page + 1;
      return undefined;
    },
  });
};

 

import { useInfiniteQuery } from "@tanstack/react-query";
import { InfiniteData } from "@tanstack/query-core";

export const useInfiniteScroll = (
  queryKey: string,
  fetchFunction: (pageParam: number) => Promise<MovieResponse>
) => {
  return useInfiniteQuery<MovieResponse, Error, InfiniteData<MovieResponse>, string[], number>({
    queryKey: [queryKey],
    queryFn: ({ pageParam = 1 }) => fetchFunction(pageParam),
    initialPageParam: 1,
    getNextPageParam: (lastPage) => {
      if (lastPage.page < lastPage.total_pages) return lastPage.page + 1;
      return undefined;
    },
  });
};

 

// 인기 영화 무한 스크롤 불러오기
export const usePopularMovies = () => {
  return useInfiniteScroll("popularMovies", api.movie.fetchPopularMovies);
};

// 현재 상영 영화 무한 스크롤
export const useNowPlayingMovies = () => {
  return useInfiniteScroll("nowPlayingMovies", api.movie.fetchNowPlayingMovies);
};

// 상영 예정 영화 무한 스크롤
export const useUpcomingMovies = () => {
  return useInfiniteScroll("upcomingMovies", api.movie.fetchUpcomingMovies);
};

 

 

이번 리팩토링으로 코드 중복을 줄이고 유지보수성을 높일 수 있었습니다.