📚 Reference

• 공식 문서 1
• 참고 자료 1

📜 Chapter

‣

Query Keys

• Query Keys
• useEffect의 depency array 처럼 작동한다.
• queryKey는 React Query에서 중요한 개념이다.
• 내부적으로 데이터를 캐시하고 쿼리에 대한 종속성이 변경될 때 자동으로 다시 가져올 수 있게 한다.
• 그리고 필요한 시점에 queryKey를 통해 query cache와 상호작용이 가능하다.

Query Keys 설계

• 필터 변경 시 기존 데이터를 cache하고, 필터별 캐시 키를 분리하면 UX가 좋아진다.

  • 필터 조합마다 다른 queryKey를 써서, 결과를 따로 캐시한다는 뜻이다.

  • UX가 개선 되는 이유

    • 예를 들어 사용자가 1. 스킨케어 필터 조회, 2. 메이크업 필터로 변경, 3. 다시 스킨케어로 돌아옴
    • 이때 스킨케어 결과가 이미 캐시에 있으면, 다시 네트워크 요청 기다리지 않고 즉시 기존 데이터를 보여줄 수 있다.
    • 즉, 화면 깜빡임 감소, 로딩 시간 체감 감소, 이전에 보던 결과를 빠르게 복원된다.

  • 구현 예시

    1. 필터 상태를 별도로 관리 (예: Zustand, useState, URL query param)

       const filters = {
         category: 'skincare',
         sort: 'popular',
         minPrice: 10000,
         maxPrice: 30000,
       };
       

    2. queryKey에 필터를 포함

       const query = useQuery({
         queryKey: ['products', filters],
         queryFn: () => getProducts(filters),
         staleTime: 1000 * 30,
       });
       

    3. 필터 바뀌면 queryKey도 바뀜

    • TanStack Query가 자동으로 새 필터 조합용 캐시 찾고 있으면 바로 사용하고 없으면 새 요청 보냄

예제

• 예시 1

  • 카테고리: 스킨케어
  • 정렬: 인기순
  • 가격대: 1만~3만

  이 조합으로 조회한 결과와,

  • 카테고리: 메이크업
  • 정렬: 최신순

  이 결과는 완전히 다른 데이터이다. 그래서 캐시도 따로 가져가야 한다.

  • 안 좋은 예시

    useQuery({
      queryKey: ['products'],
      queryFn: fetchProducts,
    })
    

    • 이렇게 하면 필터가 바뀌어도 같은 캐시로 취급돼서 문제 생길 수 있다.

  • 좋은 예시

    useQuery({
      queryKey: ['products', filters],
      queryFn: () => fetchProducts(filters),
    })
    

    • 또는 더 명시적으로

      useQuery({
        queryKey: [
          'products',
          filters.category,
          filters.sort,
          filters.priceRange?.min,
          filters.priceRange?.max,
        ],
        queryFn: () => fetchProducts(filters),
      })
      

      이렇게 하면

      • 스킨케어 + 인기순
      • 메이크업 + 최신순

      이 각각 별도 캐시가 된다.