react-query 기초 및 적용하기

시작하며

최근 효율성과 오버엔지니어링에 대한 생각을 자주 하게된다. 주니어 개발자라 새로운 기술과 힙한 기술이 보이기만 하면 배우고 싶었는데 이 많은 것을 하나의 프로젝트에 전부 사용하기도 어려울 뿐더러 간단하게 개발할 수 있는 것을 너무 과하게 시간과 기술을 투자하는 것이 효율성이 떨어지는 것처럼 느껴졌다. 

 

그런 점에서 전역 상태관리 라이브러리 중 redux를 공부하였는데 typescript와 사용하였을 때 reducer 까지는 괜찮았지만 비동기 작업을 하면서 어쩔 수 없이 thunk나 saga를 구현해야 했다. 작업이 큰 프로젝트면 모르겠는데 fetch를 몇번 날리지 않는데 그걸 구현하는데 드는 피로감이 상당했다(물론 아직 익숙하지 않은 것도 있다😰). 차라리 전역 상태는 어떨 수 없이 필요한 부분만 사용하고 프로젝트 구조와 component의 역할을 분명히 하면서 이를 대체할 수 있는 방법을 고민하게 되었다. 

 

react-query

react-query는 다음과 같은 특징으로 내가 가진 고민에 대한 대안을 보여주는 것처럼 보였다. 비록 react-query를 사용했을 때 component 간의 구조를 조금 더 공부해야 하지만 loading, error, 데이터, 캐시 등 직접 구현하려면 많은 품이 들어가는 부분을 좋은 가독성과 함께 구현할 수 있다는 점에서 좋은 라이브러리라고 생각했다.

• fetching, caching, 서버상태 동기화 및 업데이트를 쉽게 해주는 라이브러리
• 서버에서 받아온 데이터를 다루기가 쉽다.
• loading, error, success 등의 비동기 데이터에 대한 응답 기능을 제공해줘서 가독성과 유지보수성이 좋다. 

 

적용하기

yarn add react-query

QueryClientProvider를 통해 queryClient를 제공해준다.

import { QueryClient, QueryClientProvider } from 'react-query';
const queryClient = new QueryClient();
...
<QueryClientProvider client={queryClient}>
	<App/>
</QueryClientProvider>
...

 

useQuery

• API로부터 get method를 사용하는데 쓰인다 (그 외는 useMutation)
• return 값으로 data, isLoading, isError등이 있고 캐싱에 사용할 query key, Promise를 리턴하는 함수, 그 외 옵션을 parameter로 전달한다.

useQuery(queryKey, queryFn?, {
cashTime, // Inaction 상태에서 캐시 데이터가 메모리에 남아있는 시간이다. 기본 5분이고 이후 가비지 컬렉터에 수거되고 Delete 상태가 된다. 
enabled, // 동기로 바꿔줫 자동으로 실행되지 않게 설정되는 옵션
networkMode,
initialData, // 쿼리가 아직 생성되기 전에 해당 쿼리 값을 불러오도록 코딩하면 참조 에러가 발생하는데 이때 쿼리 캐시의 초기 데이터를 설정한다. (초기 데이터는 기본적으로 Stale 상태)
initialDataUpdatedAt, 
isDataEqual,
keepPreviousData,
meta, 
notifyOnChangeProps,
onError,  //비동기 함수의 요청이 실패할 경우
onSettled,  //쿼리가 성공해서 성공한 데이터가 전달되거나, 실패해서 에러가 전달 될 떄 실행되는 함수, 매개변수로 성공시에는 데이터, 실패시에는 에러가 전달된다. 
onSuccess, //비동기 함수의 요청이 성공할 경우, useState를 사용하기 좋다.
placeholderData,
queryKeyHashFn,
refetchInterval, //몇 초 마다 refetching을 할 것인지.
refetchIntervalInBackground,
refetchOnMount, //데이터가 stale 상태일 경우 마운트 시마다 refetch를 실행하는 옵션 
refetchOnReconnected, //데이터가 stale 상태일 경우  재연결 될 때 refetch를 실행하는 옵션
refetchOnWindowFocus, //데이터가 stale 상태일 경우 윈도우가 포커실 될 떄마다 refetch를 실행하는 옵션
retry, //요청이 실패했을 때 재시도 횟수를 정하는 옵션, 기본값 3번
retryOnMount,
retryDelay,
select,
staleTime, //fresh에서 stale오 변경되는 시간(기본: 0)
structuralSharing,
suspense,
useErrorBoundary
});

예시

const getPosts = async () => {
	return axios('http://.../posts')
    then(res => res.data);
}
const { data, isLoading, isError } = useQuery(['todos'], getPosts, {
	onSuccess: ()=>{ setPosts(data)},
    refetchIntervals: 5000 //5초마다 refetch
})

 

 

 

개발자 도구로 데이터 확인하기

• ReactQueryDevtools를 통해 react-query에 있는 데이터와 상태, 옵션들을 볼 수 있다. 
• 만약 오류가 뜨는 경우 import를 'react-query/types/devtools'에서 하지 않았는지 확인해야 한다. 

import { ReactQueryDevtools} from 'react-query/devtools';

...
<ReactQueryDevtools initialIsOpen={true} />

 

 

이어서 useMutations으로 ➡