[React Query] React Query 사용하기

React Query 사용하기

먼저 react-query 라이브러리를 프로젝트에 설치해야 합니다.

• npm install react-query
• yarn add react-query

그 후에, queryClient를 생성합니다.

• client는 쿼리와 캐시를 관리합니다

 

QueryClientProvider를 적용합니다.

• React Query의 캐시와 client 설정을 자식 컴포넌트들이 사용할 수 있도록 합니다.
• queryClient를 props로 받습니다.

 

useQuery를 실행합니다

• useQuery는 서버로부터 데이터를 fetch하는 hook입니다.

 

App.jsx

[코드 1-2] React Query 세팅

react-query 라이브러리로 부터 QueryClient와 QueryClientProvider를 import해서 가져옵니다. QueryClient를 이용하여 queryClient 객체를 생성합니다. queryClient는 cache와 defaultOptions (쿼리에 적용할 옵션)을 유지하게 됩니다. 모든 컴포넌트에서 사용할 수 있게 return문 내부에서 QueryClientProvider 컴포넌트로 내부를 감싸줍니다. 이렇게 되면 QueryClientProvider 내부의 컴포넌트들은 React Query의 기능들을 사용할 수 있게 됩니다. client라는 prop에 queryClient 객체를 넘겨줌으로써 query와 cache를 관리하게 합니다.

 

Posts.jsx

[코드 1-3] useQuery hook 사용하기

 

useQuery는 서버로부터 data를 fetch하기 위한 훅입니다. useQuery는 매우 많은 프라퍼티를 가진 객체를 return합니다. 보통은 디스트럭처링을 통해 사용 할 프라퍼티를 변수에 담게 됩니다. 대표적으로는 data 프라퍼티에는 서버로 부터 가져온 데이터가 담기게 됩니다. useQuery의 매개변수로는 첫 번째는 이 요청의 이름을 무엇으로 할 것인지 정할 수 있는 query key를 받습니다. 두 번째는 서버의 데이터를 가져오기 위한 fetch 함수(비동기 함수)인 query function 을 받습니다. 세 번째는 이 query에 대한 옵션을 설정할 수 있습니다. useQuery를 실행하면 데이터값은 처음에는 undefined가 됩니다. fetch 함수는 비동기이기 때문에 resolve 되기 전 까지는 서버로부터 값을 받아올 수 없기 때문입니다. 이를 처리하기 위한 방법은 천천히 알아보도록 하겠습니다.

useQuery의 다양한 properties

isLoading, isError

모두 boolean값을 가지고 있습니다. isLoading은 현재 query가 서버로부터 데이터를 로딩하고 있는지, isError는 서버로부터 데이터를 요청할 때 에러가 있는지 확인할 수 있습니다.

 

[코드 1-4] isLoading, isError 처리

 

isLoading 프라퍼티는 서버로부터 데이터를 아직 받아오지 못한 경우에는 false, 데이터를 받아오면 true 가 됩니다. if문을 이용하여 return 처리를 해 줄 수 있습니다. isError 프라퍼티는 서버로부터 데이터를 가져올 수 없게 되면 true, 데이터를 가져오면 false가 됩니다. 에러를 판단하기 위해서 처음 fetch 함수가 실패하면 추가적으로 3번 요청을 하고 모두 실패하면 true값을 얻게 됩니다. 

isFetching vs isLoading

isFetching은  query function이 아직 resolve 되지 않았으면 true값을 지닙니다.

isLoading은 isFetching에 추가해서 cached data가 없을 때 true값을 지닙니다. cached data가 없다는 것은 이 쿼리를 이전에 사용하지 않았거나 cachedTime이 경과된 것을 의미합니다.

이 2가지는 비슷해 보이지만 Infinite Scroll을 구현하는 경우에 구별하고 싶은 경우가 생깁니다. 언제 cached data를 갖는지, 갖지 않는지에 따른 차이입니다. 잘 이해가 되지 않는게 당연합니다. 천천히 알아보도록 하겠습니다.

error

error 프라퍼티는 에러가 발생했을 때 에러 메시지를 받습니다. error가 발생했을 때는 error callback 을 사용할 수 있습니다 (useQuery의 옵션으로). callback을 이용하여 에러 처리를 더욱 세련되게 할 수 있습니다.