custom hooks / useQuery(tanstack/react-query)

커스텀 훅은

use 라는 이름을 사용해줘야하고

일반 컴포넌트처럼 동일하게 useState, useEffect, useCallback, useMemo 등 다 사용 가능

원하는 데이터를 반환하면 된다(return [loading, error, products];)

 

 

-----------------------------------------------------------------------------------

 

2023.12.05

커스텀 훅 보다 'tanstack/react-query' 를 사용하는 게 훨씬 편하다!

 

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

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

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