React Query) 1. useQuery로 데이터 가져오기

1. 설치

npm i react-query

 

2. 세팅

root component를 QueryClientProvider로 감싸줍니다.

function App() {
  const queryClient = new QueryClient();

  return (
    <QueryClientProvider client={queryClient}>
		...
      <ReactQueryDevtools initialIsOpen={false} position="bottom-right" />
      // ReactQueryDevtools는 현재 react-query의 상태를 볼 수 있는 도구
    </QueryClientProvider>
  );
}

여기까지 했으면 준비는 끝

 

3. 적용

기본 사용법은

1. 사용할 컴포넌트에서 useQuery를 선언하고
2. 인자로 queryKey, API 호출 함수, 옵션을 넣습니다.
3. 객체 분할하여 사용할 값을 사용합니다. 

주저리 주저리 설명하는 것보다 코드로 보는 게 이해가 빠를 거 같네요

바로 useQuery를 사용해 데이터를 불러와 보겠습니다. 

불러오는 데이터는 superheroes

"superheroes": [
    {
      "id": 1,
      "name": "Batman",
      "alterEgo": "Bruce Wayne"
    },
    {
      "id": 2,
      "name": "Superman",
      "alterEgo": "Clark Kent"
    },
    {
      "id": 3,
      "name": "Wonder Woman",
      "alterEgo": "Princess Diana"
    }
  ]

id, name, alterEgo 을 가지고 있는 json 파일입니다.

 

 

 const { data, isLoading, error, isError, isFetching } = useQuery("super-heros", ()=> axios.get(`${url}`),
{
	opctions...
});

 

받는 값 :

객체 분할하여 받을수있는 대표적인 값은

1. data : API 함수로 불러온 값
2. isLoading : data가 들어오지 않았다면 false, 들어오면 true
3. error : 에러가 났을 때 뜨는 Error 값 (404 not found, 400 Bad request 등)
4. isError : 에러면 true, 아니면 false
5. isFetching : 서버와 통신을 했으면 true 안 했으면 false

등을 react query가 알아서 만들어서 주니 정말 편합니다.

어떻게 사용하면 좋을지 간단하게 보여드리면

 

  if (isLoading || isFetching) {
    return <h2>Loading...</h2>;
  }

  if (error) {
    return <h2>Error : {error.message}</h2>;
  }

정말 쉽습니다!

 

 

 

인자 : 

useQuery의 첫 번째 인자는 queryKey로 각 요청을 구분하기 위한 인자입니다.

배열이 들어가도 좋습니다. (pagenation 할 때 쓰입니다.)

 

두 번째 인자는 API 요청 함수를 적어주면 되고

 

세 번째 인자는 opction으로 여러 가지 기능이 있습니다.

staleTime :

더 길게 지정하면 staleTime쿼리가 데이터를 자주 다시 가져오지 않습니다.

default value : 0초

이유 : 0초가 안전해서

 

cacheTime :

기본적으로 "비활성" 쿼리는 5분 후에 가비지 수집 됩니다.

이를 변경하려면 cacheTime쿼리 의 기본값 을 1000 60 5밀리초가 아닌 다른 값 으로 변경할 수 있습니다 .

 

refetchOnMount :

mount 될때마다 매번 fetch

(true / false / "always")

 

refetchInterval :

실시간 데이터 fetch나 주식같이 초단위로 fetch 해야하는 경우 사용

 

refetchIntervalBackground :

백그라운드에서도 초단위로 refetch

 

enabled :

false면 fetch하지 않음 but, refetch 함수가 실행되면 fetch됨

 

onSuccess :

성공할시 실행할 함수,

onError:

실패할시 실행할 함수

 

select :

데이터를 받고나서 가공한다음에 뿌려주는 역할

 

활용 예시)

 const { isLoading, data, error, isFetching } = useQuery("super-heros", ()=> axios.get(`${url}`),{
    staleTime: 5 * 60 * 1000,
    // 5분마다 데이터를 fetch 합니다.
    cacheTime: 5 * 60 * 1000,
    // 데이터 캐싱 유지를 5분동안 합니다.
    select: (data) => {
      const superHeroNames = data.map((hero) => hero.name);
      return superHeroNames;
    },
    // response 데이터 객체에서 name 컬럼만 빼내어 가공한뒤 return 합니다 
    });