문제 배경

1. 데이터 로딩 중 깜빡임 발생

   라벨 변경 시마다 새로운 데이터가 로드되면서 지도 상의 마커들이 깜빡이는 현상이 발생.

2. 지도 초기화 문제

   라벨 변경 후, 데이터 로드 완료 시 지도 중심이 초기 상태로 되돌아가거는 문제가 발생.

이는 네트워크 요청과 UI 갱신 사이의 딜레이로 인해 사용자 경험이 저하되는 원인이 되었음.

기존 코드ㅌ 롱

import { useQuery } from "@tanstack/react-query";
import { fetchMapMarkersByLabel } from "@/api";

export const useMarkersByLabel = (label: string) => {
  const { data, isLoading, isError } = useQuery({
    queryKey: ["markers", label],
    queryFn: () => fetchMapMarkersByLabel(label),
    enabled: !!label, 
  });

  return {
    markers: data,
    isLoading,
    isError,
  };
};

프리패칭 도입 전에는 데이터가 필요할 때마다 API 요청이 발생하며, 로딩 상태와 데이터 갱신 간의 간격이 존재했음.

Prefetching 도입

프리패칭은 사용자가 특정 라벨의 데이터를 필요로 하기 전에 데이터를 미리 캐싱하는 방법으로, 다음 방식으로 구현되었음:

export const prefetchMarkersByLabel = (
  queryClient: ReturnType<typeof useQueryClient>,
  label: string
) => {
  queryClient.prefetchQuery({
    queryKey: ["markers", label],
    queryFn: () => fetchMapMarkersByLabel(label),
  });
};

import {
  useGetHoleMarkers,
  useGetMarkersByLabel,
  prefetchMarkersByLabel,
} from "@/store/queries/map.query";
import { useQueryClient } from "@tanstack/react-query";

export const useMap = (label?: string) => {
  const queryClient = useQueryClient();
  const safeLabel = label ?? "";

  const {
    data: HoleMarkers,
    isLoading: LoadingHole,
    isError: HoleError,
  } = useGetHoleMarkers();

  const {
    data: filteredMarkers,
    isLoading,
    isError,
    isPending,
  } = useGetMarkersByLabel(safeLabel);

  const labels = ["한식", "일식", "중식", "양식", "디저트"];
  labels
    .filter((label) => label !== safeLabel)
    .forEach((label) => {
      prefetchMarkersByLabel(queryClient, label);
    });

  return {
    HoleMarkers,
    LoadingHole,
    HoleError,
    filteredMarkers,
    isLoading,
    isError,
    isPending,
  };
};

1. React Query의 prefetchQuery를 활용하여 라벨 리스트를 순회하며 각 라벨의 데이터를 백그라운드에서 미리 로드.
2. 캐싱된 데이터를 활용해 라벨 변경 시 로딩 상태 없이 데이터를 즉시 제공.

해결된 문제

1. 깜빡임 제거

프리패칭으로 인해 라벨 변경 시 데이터를 즉시 로드할 수 있어 마커가 깜빡이는 현상이 사라짐.

• 네트워크 요청 대기 없이 캐싱된 데이터를 활용해 UI가 매끄럽게 전환.
• 사용자 경험이 크게 개선됨.

2. 지도 초기화 문제 해결