React Query?
👇 공식문서에서는 React-Query를 다음과 같이 설명하고 있다.
💡 React Query는 React Application에서 서버 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트하는 작업을 도와주는 라이브러리다
React Query가 많이 사용되고 있는 이유
- 프로젝트 구조가 기존보다 단순해진다.
- 캐싱 처리가 더 간단해졌다
- 직접 만들어서 사용했던 기타 기능들을 옵션으로 지원한다
- Redux와 Redux - Saga를 사용할 때는 Success, Failure 값을 useEffect의 deps로 전달해서 처리해야 하는 과정이 필요했었는데, 이 과정을 onSuccess와 onError로 간단하게 처리할 수 있다
등, 이런 장점으로 인해 React Query의 사용량이 늘어나고 있는 추세이다.
React Query에서 자주 사용되는 기능
useQuery
useQuery를 이용해서 데이터를 fetching 할 수 있다
HTTP GET 요청을 할 때, 주로 사용한다
// useQuery 사용 예시
const { data, isLoading, error } = useQuery('hostParties', () =>
getAPI(`${PARTIES_URL.MY_HOST_LIST}`),
);
if (isLoading) {
return <div>로딩중입니다.</div>;
}
if (error) {
return <div>Error : {error.message}</div>;
}useMutation
서버의 데이터를 변경할 때 사용한다
HTTP POST, PUT, DELETE 요청을 사용할 수 있다
기본적으로 useQuery와 비슷하지만 query key가 안 들어 간다는 차이점이 있다.
// useMutation 사용 예시
const AlramDelete = useMutation(noticeId => deleteAPI(`/sse/notice/${noticeNumber}`), {
// 요청이 성공한 경우
onSuccess: response => {
queryClient.invalidateQueries('requests');
alert(response.data.msg);
},
// 요청에 에러가 발생된 경우
onError: error => {
alert(error.data.msg);
},
});Query Invalidation
useMutation을 사용해서 데이터를 create, update, delete 후 변경된 데이터를 확인하고 싶으면 데이터를 새로 fetch 해야한다
이런 상황을 간단하게 해결할 수 있는 방법으로 invalidateQueries를 사용할 수 있다
// Query Invalidation 사용 예시
const acceptRequest = useMutation(
participateId => postAPI(`${PARTIES_URL.ACCEPT}/${participateId}`),
{
onSuccess: response => {
queryClient.invalidateQueries('requests');
alert(response.data.msg);
},
onError: error => {
alert(error.data.msg);
},
},
);React Query의 장점
- 비동기 데이터를 관리하기 위한 라이브러리
- 데이터 캐싱에 대한 컨트롤이 가능
- get을 한 데이터에 대해 update를 하면 자동으로 get을 다시 수행한다.
- 데이터가 오래 되었다고 판단되면 다시 get (invalidateQueries)
- 동일 데이터 여러번 요청하면 한번만 요청한다.
- 비동기 과정을 선언적으로 관리할 수 있다
- React hook 과 사용하는 구조가 비슷하다
React Query의 단점
- 아직 개발 중인 라이브러리이기 때문에 해결하지 못한 에러가 발생할 수도 있다.
- 커뮤니티 규모가 그리 크지 않아 queryKey에 대한 best practice 등이 잘 정립되어있지 않다.
