react : useQuery 에서 key 가 의미하는 것

useQuery에서 key는 캐싱과 데이터 업데이트를 관리하는 데 중요한 역할을 하는 고유 식별자다. React Query에서는 이 key를 기반으로 데이터를 가져오고, 상태를 캐싱하고, 리렌더링을 최적화한다.

 

useQuery의 key란?

• key는 쿼리를 구별하는 식별자로 사용된다.
• 같은 key를 가진 쿼리는 React Query의 캐시를 공유한다.
• key가 변경되면 해당 쿼리는 다시 실행된다.

import { useQuery } from '@tanstack/react-query';

const fetchUser = async () => {
  const res = await fetch('/api/user');
  return res.json();
};

function UserProfile() {
  const { data, error, isLoading } = useQuery(['user'], fetchUser);

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error loading user data</p>;

  return <p>Username: {data.name}</p>;
}

 

Key의 역할

• ['user']가 이 쿼리의 key로 사용됨.
• 같은 key를 가진 쿼리는 React Query가 자동으로 캐싱.
• 컴포넌트가 다시 렌더링될 때 중복된 요청을 보내지 않음.

 

Key를 동적으로 사용하기

쿼리 key는 배열 형태로 작성할 수 있어서 동적인 데이터 쿼리에도 활용 가능하다.

const fetchUser = async (id) => {
  const res = await fetch(`/api/user/${id}`);
  return res.json();
};

function UserProfile({ userId }) {
  const { data, error, isLoading } = useQuery(['user', userId], () => fetchUser(userId));

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error loading user data</p>;

  return <p>Username: {data.name}</p>;
}

 

Key가 동적인 경우

• ['user', userId]를 사용하여 userId마다 다른 데이터를 캐싱.
• userId가 변경되면 자동으로 새로운 데이터를 가져옴.

 

Key를 활용한 캐시 무효화 & 데이터 리프레시

쿼리 key를 활용하면 특정 데이터를 강제로 업데이트할 수 있다.

import { useQueryClient, useMutation } from '@tanstack/react-query';

const queryClient = useQueryClient();

const mutation = useMutation(updateUser, {
  onSuccess: () => {
    queryClient.invalidateQueries(['user']);
  }
});

 

 

invalidateQueries 활용

• queryClient.invalidateQueries(['user'])를 호출하면 캐시가 무효화되면서 최신 데이터를 다시 불러옴.
• 특정 key에 해당하는 데이터만 다시 요청할 수 있어서 성능 최적화 가능.

 

정리

• key는 쿼리를 구별하는 고유한 식별자 역할을 한다.
• 같은 key를 사용하면 캐싱을 활용할 수 있어 성능 최적화가 된다.
• key가 변경되면 자동으로 데이터가 업데이트된다.
• queryClient.invalidateQueries(key)를 사용하면 특정 데이터만 새로고침할 수 있다.