React Query 1편
✏️ React Query는 무엇일까
요즘 React 기반의 프로젝트를 보면 비동기 통신에 React Query를 많이 사용하고 있는 걸 볼 수 있다.
필자는 최근에서야 실무에서 React를 주로 사용하게 되었고, 이전에는 Vue를 주로 사용하다 보니 비동기 통신은
Axios만 사용했었고, Axios로 데이터를 가져오면 Vuex로 관리하게 되었는데 요즘은 React Query + Recoil 조합을
꽤 많이 사용하는 것 같다.
우선, React Query는 자신을 비동기 상태 관리라고 설명한다. 서버에 있는 데이터를 가져오고, 캐싱하고, 비동기 통신에서 발생하는 Error 혹은 Loading 단계를 쉽게 처리할 수 있도록 도와준다.
처음 React Query를 다룰 때 캐싱한다는 게 조금 생소했다. 그러나 생각해보면 만약 사용자에게 최신 데이터를 보여줘야 하는 상황이 아닐 경우에는, 처음에만 API를 통해 데이터를 가져오고 이후에는 이전에 가져온 데이터를 보여주면 리소스를 절약할 수 있다. 이런 부분에서 React Query가 도와줄 수 있다고 필자는 생각했다.
사용 이유를 조금 정리해보자면...
- 데이터를 미리 가져오거나 (prefetch), 데이터를 캐싱해두고 사용자에게 빠르게 전달할 수 있다.
- 가져온 데이터를 특정 key로 보관하고, 특정 시간을 설정하고 해당 시간이 지났을 때만 데이터를 다시 가져오게 하거나 캐시를 무효화하여 데이터를 다시 가져오게 할 수 있다.
- Error, Loading 상태의 처리를 쉽게 할 수 있다.
이번 포스팅에서는 React Query 설정 및 Use Query에 대해 기본적인 코드를 살펴보려고 한다.
React Query 적용하기
먼저, React App을 QueryClientProvider로 랩핑해야 한다.
new QueryClient('이 안에 옵션으로 여러가지를 설정할 수 있다')
import { QueryClient, QueryClientProvider } from 'react-query';
const queryClient = new QueryClient();
function App() {
return (
// provide React Query client to App
<QueryClientProvider client={queryClient}>
<div className="App">
<h1>Blog Posts</h1>
<Posts />
</div>
</QueryClientProvider>
);
}
useQuery는 데이터를 가져오는 React Query의 함수다.
어떻게 사용할까?
async function fetchPosts() {
const response = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=10&_page=0');
return response.json();
}
export function Post() {
const { data, isLoading, isError, error } = useQuery('posts', fetchPosts);
if (isLoading) return <h3>Loading...</h3>;
if (isError) return <h3>Oops, 오류 발생{error.toString()}</h3>;
return <div>성공</div>
}
첫번째로 전달해줘야 하는 값은 key다. 두번째로 전달되는 값은 비동기 함수다.
두번째 전달 값에 대한 공식 문서 내용이다.
Promise based method (including GET and POST methods)
예시 코드에서는 fetch를 사용했지만 axios를 사용할 수도 있다.
useQuery에서 반환되는 값은 여러가지가 있는데, 주로 사용하는 값 위주로 예시 코드를 작성했다.
data: fetchPosts에서 통신에 성공했을 때 가져오는 데이터
isLoading: 비동기 쿼리가 완료됐는지, 가져오는 중인지에 대한 boolean 값
isError: 오류 발생에 대한 boolean 값
error: 오류 관련 값을 가지고 있는 객체
isFetching vs isLoading
isFetching: 비동기 쿼리가 완료되었는지에 대한 boolean 값, 캐싱 데이터가 있는 경우에도 데이터를 가져올 때 true가 됨.
isLoading: isFetching + 캐싱된 데이터가 없을 때.
그 외에도 useQuery가 반환하는 값은 꽤 많은데, 아래 문서에서 확인할 수 있다.
useQuery | TanStack Query Docs
const { data,
tanstack.com
React Query는 Devtools를 크롬 확장프로그램이 아닌 코드 레벨에서 설정해야 한다. 장점은 여러가지가 있는데,
내가 느낀것만 나열해보면 아래와 같다.
- Query Key로 Query를 표시해줌
- 활성, 비활성, 만료 등 Query의 상태 확인 가능
- 반환된 데이터 확인 가능
- Query 탐색기 지원
- Production 환경에는 기본적으로 제공되지 않도록 옵션이 설정되어 있음.
import { ReactQueryDevtools } from 'react-query/devtools';
function App() {
return (
// provide React Query client to App
<QueryClientProvider client={queryClient}>
<div className="App">
</div>
<ReactQueryDevtools />
</QueryClientProvider>
);
}
다음 포스팅에서는 stale, cache, pagination 등을 정리하여 올릴 예정이다.