1. useQuery ?

useQuery는 React Query의 핵심 훅으로, 서버로부터 데이터를 가져오는 작업을 담당합니다.

2. useQuery 사용하기

1 ) useQuery 사용방법

useQuery는 매개변수로 객체를 받습니다.

객체에는 querykey, queryFn(데이터를 가져오는 함수), option이 들어갑니다.

useQuery({ querykey, queryFn, option });

2 ) querykey

React Query가 캐시를 관리하기 위해 사용하는 고유 식별자입니다. 쿼리 키는 배열형태로 들어가며, 동일한 쿼리 키를 가진 모든 쿼리는 같은 데이터를 공유합니다. 쿼리 키를 통해 React Query는 서버에서 가져온 데이터를 캐시에 저장하고, 이후 동일한 키로 요청이 들어올 때 캐시된 데이터를 사용하여 불필요한 네트워크 요청을 줄입니다. 또한, 쿼리 키를 통해 특정 쿼리를 무효화하거나 업데이트할 수 있습니다.

3 ) query option

React Query의 useQuery 훅은 다양한 옵션을 받을 수 있습니다. 이 옵션들은 쿼리의 동작을 세밀하게 제어하는 데 사용됩니다. 아래에 자주 사용되는 옵션들을 설명하고 각각에 대한 사용 예시를 제공하겠습니다.

enabled : 쿼리를 바로 실행할 것인지를 설정합니다. 기본값은 true입니다. false로 설정하면 쿼리는 자동으로 실행되지 않습니다.

useQuery({ 
  querykey: ['todos', id], 
  queryFn: fetchTodos,
  enabled: false,
});

retry : 쿼리가 실패했을 때 재시도할 횟수를 설정합니다. 기본값은 3입니다. false로 설정하면 쿼리가 실패해도 재시도하지 않습니다.