[FE] Prefetch 사용해보기

정성엽·2025년 6월 28일

frontend react-query

LG CNS AM Inspire 1기

목록 보기

69/70

INTRO

프로젝트에서 사용자 어플리케이션을 개발하고 실제로 사용해보니 약간의 UX 문제를 발견했다.

바텀시트에서 월을 변경할 때마다 로딩 인디케이터가 나타나서 사용자 경험이 매끄럽지 않았던 것이다.

이번 포스팅을 통해, 어떤 문제였고 어떻게 해결했는지 아주 간단하게 소개해보려고 한다!

1. Problem

문제 상황은 다음과 같다.

💡 문제 원인

바텀시트를 열고 월을 변경할 때마다 새로운 데이터를 불러오기 때문에 잠깐동안 로딩 인디케이터가 돌아가는 문제였다.

React Query를 사용하고 기본 캐싱 시간을 5분으로 설정해놨기 때문에 다음과 같이 동작하고 있었다.

동작 순서
1. 예약 페이지 접근
2. 현재 월 데이터 패치 (6월)
3. 바텀 시트 열기 (6월 데이터 저장되어있음)
4. 7월로 변경
5. 7월 데이터 API 요청
6. 인디케이터 발생
7. 7월 데이터 캐싱
8. 데이터가 변경되어 다시 Default 세팅인 6월로 이동
9. 8월로 이동 -> 1~8 과정 반복

매번 새로운 월로 이동할 때마다 로딩이 발생하니 UX가 정말 좋지 않았다..

2. Solve

찾아보니 React Query에서는 Prefetch 기능을 아주 간단하게 제공하고 있었다.

현재 월 데이터를 가져올 때 미리 전후 월 데이터도 함께 가져와서 캐시에 저장해두면, 사용자가 월을 변경해도 로딩 없이 바로 데이터를 보여줄 수 있다.

Sample Code

export const useGetReservationInfoApi = ({ popupId, yyyyMM }: GetReservationInfoRequest) => {
  const queryClient = useQueryClient();

  const query = useQuery({
    queryKey: ['reservationInfo', popupId, yyyyMM],
    queryFn: () => getReservationInfo({ popupId, yyyyMM }),
    staleTime: 5 * 60 * 1000,
    gcTime: 10 * 60 * 1000,
    refetchOnWindowFocus: false,
    refetchOnMount: false,
  });

  useEffect(() => {
    if (query.data && !query.isLoading) {
      const currentDate = new Date(yyyyMM + '-01');

      const nextMonth = new Date(currentDate);
      nextMonth.setMonth(nextMonth.getMonth() + 1);
      const nextYearMonth = `${nextMonth.getFullYear()}-${String(nextMonth.getMonth() + 1).padStart(2, '0')}`;

      const prevMonth = new Date(currentDate);
      prevMonth.setMonth(prevMonth.getMonth() - 1);
      const prevYearMonth = `${prevMonth.getFullYear()}-${String(prevMonth.getMonth() + 1).padStart(2, '0')}`;

      queryClient.prefetchQuery({
        queryKey: ['reservationInfo', popupId, nextYearMonth],
        queryFn: () => getReservationInfo({ popupId, yyyyMM: nextYearMonth }),
        staleTime: 5 * 60 * 1000,
      });

      queryClient.prefetchQuery({
        queryKey: ['reservationInfo', popupId, prevYearMonth],
        queryFn: () => getReservationInfo({ popupId, yyyyMM: prevYearMonth }),
        staleTime: 5 * 60 * 1000,
      });
    }
  }, [query.data, query.isLoading, popupId, yyyyMM, queryClient]);

  return {
    reservationInfo: query.data?.data,
    isLoading: query.isLoading,
    isError: query.isError,
  };
};