useQuery는 get 요청에 대해 사용할수 있습니다.

const { data, isLoading } = useQuery([queryKey], queryFn, {
	//다양한 옵션 사용가능 ex) enabled, onSuccess, onError 등등..
});

useQuery는 기본적으로 3가지 인자를 받습니다. 첫번째 인자인 queryKey(필수), 두번째 인자인 queryFn(필수) 마지막 option 입니다.

• queryKey

1. useQuery로 조회한 값들은 고유한 queryKey로 데이터를 캐싱하게 됩니다.
2. 같은 key값으로 useQuery를 조회할때 캐시에 남아있으면 api를 재호출하지 않고 캐싱된 데이터를 가져옵니다.
3. tanstack-query v4버전 부터는 key를 [ ]배열 안에 지정해야 합니다. ex) [’userInfo’] ⇒ userInfo라는 고유한 key값을 가지게 됩니다.

• queryFn

1. 두번째 인자인 queryFn은 Promise를 반환하는 함수를 넣어야 합니다.

const getUserInfo = async() => {
	const { data } = await axios.get('/userinfo');
	return data;
};

• option

옵션에는 정말 많은 기능이 존재합니다. 그중 주요 옵션들에 대해 정리하고자 합니다.

1. staleTime, cacheTime