👑 useQuery

React Query에서 제공하는 useQuery는 서버 데이터를 가져오고 관리하기 위한 훅이다. 이 훅은 데이터 요청부터 캐싱, 재요청, 에러 처리를 담당한다.

useQuery는 기본적으로 객체 형태의 파라미터를 받는다.

const { data, isPending, error } = useQuery({
 queryKey: ['todos'],
 queryFn: async () => {
   const response = await fetch('/api/todos')
   return response.json()
 }
})

🍫 필수 파라미터

queryKey

queryKey는 해당 쿼리를 식별하는 고유한 키다. 배열 형태로 작성한다.

단순한 문자열부터 복잡한 객체까지 포함할 수 있다. 예를 들어, 할 일 목록을 가져오는 쿼리라면 ['todos']처럼 단순하게 작성할 수 있고, 특정 사용자의 할 일을 가져온다면 ['todos', userId]와 같이 동적인 값을 포함할 수 있다.

queryKey가 변경되면 React Query는 자동으로 새로운 데이터를 요청한다. 따라서 쿼리에 영향을 주는 모든 변수는 queryKey에 포함되어야 한다.

다른 위치에서도 동일한 queryKey를 사용해 캐시된 데이터에 접근할 수 있다. 예를 들어 mutation 후 특정 쿼리의 데이터를 무효화하거나 직접 업데이트할 때 이 키를 사용한다.

queryFn

서버에서 데이터를 가져오는 비동기 함수다. 이 함수는 반드시 Promise를 반환해야 한다. 데이터는 undefined가 될 수 없다. Promise를 반환해야 하는 이유는 React Query가 비동기 상태를 추적하고 관리하기 위함이다.