React Query에서 queryKey 조건부 처리하기

React Query의 queryKey는 API 요청을 구분하는 중요한 역할을 합니다. 특정 값이 undefined일 때, 이를 무시하고 조건부로 queryKey를 설정하여 캐싱 최적화와 성능을 개선할 수 있습니다.

queryKey 조건부 설정 방법

token이 있을 때와 없을 때를 구분하여 queryKey를 동적으로 설정할 수 있습니다. 예를 들어, 다음과 같이 설정할 수 있습니다.

typescript const queryKey = token ? ['article', slug, token] : ['article', slug];

• token이 있을 때: queryKey는 ['article', 'some-slug', 'user-token'] 형태가 됩니다.
• token이 없을 때: queryKey는 ['article', 'some-slug']로 설정되어 token이 포함되지 않습니다.

이 방식을 사용하면 불필요한 undefined가 queryKey에 포함되지 않게 되어 React Query의 캐싱 및 리렌더링이 효율적으로 동작합니다.

...(조건 && { 속성 }) 패턴

스프레드 연산자와 조건부 평가를 활용하여 queryKey에 필요한 속성만 추가하는 방법은 매우 유용합니다.

 queryKey: [
      'articles',
      'list',
      {
        ...(offset && {offset}),
        ...(limit && {limit}),
        ...(tag && {tag}),
        ...(author && {author}),
        ...(favorited && {favorited}),
      },
    ],

이 방식은 각 조건을 truthy 값으로 평가하여, 해당 값이 있을 경우에만 queryKey에 포함시키는 방법입니다. undefined나 false가 들어가는 것을 방지하여 불필요한 값들이 queryKey에 포함되지 않게 합니다.

queryKey를 조건에 맞게 최적화

이 방법들을 사용하여 queryKey를 효율적으로 설정할 수 있으며, React Query의 캐싱과 리렌더링 성능을 개선하는 데 큰 도움이 됩니다.