[ Troubleshooting🛠️ ] Tanstack Query의 데이터 로딩

1.  문제 발생❓

• 필터 버튼을 처음 누를 때마다 "로딩 중..." 메세지가 잠시 표시됨
• 이는 새로운 데이터를 가져오는 동안 isLoading 상태가 true가 되기 때문
• 사용자 경험을 저하시키고 화면이 깜빡이는 느낌을 줌

<이전 코드>

// useChart.ts
export const useChart = (chartType: ChartType) => {
  return useQuery<MeloneChartList>({
    queryKey: ["melonChart", chartType],
    queryFn: () => fetchChart(chartType),
    staleTime: 1000 * 60 * 5,
    // 추가 옵션 없음
  });
};

 

 

 

 

2.  해결 과정 📋

Tanstack Query가 제공해 주는 placeholderData 옵션 사용하기

• Tanstack Query v4에서는 keepPreviousData: true 옵션을 사용하여 해결합니다.
• Tanstack Query v5에서는 placeholderData: keepPreviousData 옵션을 사용하여 해결합니다.
• 작동원리:
  • 새 데이터를 가져오는 동안 이전 쿼리의 데이터를 임시로 사용함
  • 이 기간에도 isLoading은 true이지만, data는 undefined가 아닌 이전 데이터를 유지
• 사용자 경험 개선:
  • 데이터가 없는 상태가 나타나지 않음
  • 이전 데이터가 화면에 계속 표시되다가 새 데이터로 자연스럽게 교체됨
  • "로딩 중..." 화면으로 전환되지 않아 부드러운 UI 경험 제공
• 기술적 이점: 렌더링 사이클이 줄어 리소스 절약

<수정된 코드>

import { fetchChart } from "@/services/melonApi"; // 또는 다른 경로에 있는 API 함수
import { ChartType, MeloneChartList } from "@/types/melon.type";
import { useQuery } from "@tanstack/react-query";

// melon chart를 가져오는 custom hook
export const useChart = (chartType: ChartType) => {
return useQuery<MeloneChartList>({
queryKey: ["melonChart", chartType],
queryFn: () => fetchChart(chartType),
staleTime: 1000 * 60 * 5,
keepPreviousData: true, // 이 옵션을 추가합니다 (React Query v4용)
// React Query v5를 사용하는 경우 다음과 같이 작성:
// placeholderData: keepPreviousData,
});
};

 

 

 

3.  결론 ❤‍🔥

 

  단 한줄의 코드 추가로 사용자 경험이 크게 향상될 수 있었습니다. 이 방식은 데이터가 변경되는 모든 인터페이스(필터링, 정렬, 페이지네이션 등)에서 사용자 경험을 크게 향상시키는 간단하지만 강력한 패턴입니다!