useQuery(tanstack/react-query)

아래와 같이 나눠서 사용하려고 한다.

상태관리: Zustand

API 호출: React-query(tanstack/react-query)

 

api 호출은 react-query를 사용하는게 편하고, 'tanstack/react-query' 를 사용하려고한다.

 

queryKey은 필수 값 이다, 키 값을 입력해주고 Array에 넣어주기 때문에 여러 개의 키 값을 넣어줘도 된다.

queryFn에는 data로 불러 올 promis 값을 넣어준다.

const {
   isLoading,
   error,
   data: videos,
 } = useQuery({
   queryKey: ["videos", keyword],
   queryFn: () => youtube.search(keyword),
 });

 

상태관리를 하기 위한 Zustand 는 다른 포스트에 정리를 하려고 한다.