React Query(Tanstack Query)
React Query란?
React 애플리케이션에서 서버 상태를 가져오고 캐싱하며 동기화하고 업데이트하는 작업을 도와주는 라이브러리이다.
내가 React Query를 선택한 이유
- Client 데이터와 Server 데이터 간의 분리가 된다.
- api 요청에 대한 로딩, 에러, 데이터(response) 관리가 쉽다.
- 네트워크 요청 관련 다양한 기능, 옵션들이 있다. (refetchOnWindowFocus, 브라우저에 포커스가 들어온 경우)
장점 중 하나로 캐싱도 있지만 나는 변경되는 데이터를 바로 받아야 했기 때문에 캐싱은 사용하지 않았다.
지저분한걸?!
그렇게 유용하게 잘 사용했으나..
컴포넌트, 페이지 안에 api 관련 로직들이 같이 있다 보니 코드가 길어지고 지저분해졌다!
이를 어떻게 해결할까...? 다른 개발자들도 이렇게 React-query를 사용하나? 찾아보던 중
React Query를 hook으로 만들어 사용할 수 있다는 사실을 찾았다!! (왜 이제야 보이는 거니😅)
그래서 custom hook으로 리팩터링 하는 과정을 살펴보겠다!
React Query custom hook으로 사용하기
useCart라는 hook 생성
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { addOrUpdateToCart, getCart, removeFromCart } from '../api/firebase';
import { useAuthContext } from '../context/AuthContext';
export default function useCart() {
const { uid } = useAuthContext();
const queryClient = useQueryClient();
const cartQuery = useQuery(['carts', uid || ''], () => getCart(uid), {
enabled: !!uid, // uid가 존재하는 경우에만 실행
});
const addOrUpdateItem = useMutation(
(product) => addOrUpdateToCart(uid, product),
{
onSuccess: () => {
queryClient.invalidateQueries(['carts', uid]);
},
}
);
const removeItem = useMutation((id) => removeFromCart(uid, id), {
onSuccess: () => {
queryClient.invalidateQueries(['carts', uid]);
},
});
return { cartQuery, addOrUpdateItem, removeItem };
}
useCart 사용 시 아래와 같이 사용하면 된다! (확실히 UI와 api관련 로직이 분리되어 깔끔해졌다.)
const {
cartQuery: { isLoading, data: products },
} = useCart();
const { addOrUpdateItem, removeItem } = useCart();
const handleMinus = () => {
if (quantity < 2) return;
addOrUpdateItem.mutate({ ...product, quantity: quantity - 1 });
};
const handlePlus = () =>
addOrUpdateItem.mutate({ ...product, quantity: quantity + 1 });
const handleDelete = () => removeItem.mutate(id);
const handleClick = (e) => {
const product = { id, image, title, price, option: selected, quantity: 1 };
addOrUpdateItem.mutate(product, {
onSuccess: () => {
setSuccess('장바구니에 추가되었습니다.');
setTimeout(() => setSuccess(null), 3000);
},
});
};
custom hook으로 사용했을 때 장점
- UI와 data fetching을 분리할 수 있다.
- 한 곳에서 관리하기 때문에 유지보수하기 좋다. (UI와 비즈니스 로직을 분리했기 때문에 추후 다른 네트워크 라이브러리를 사용해도 유지보수와 확장에 용이)
https://tkdodo.eu/blog/practical-react-query#create-custom-hooks
Practical React Query
Let me share with you the experiences I have made lately with React Query. Fetching data in React has never been this delightful...
tkdodo.eu
'IT' 카테고리의 다른 글
Vercel과 EC2 배포 시 무슨 차이가 있을까? (서버리스와 Cold Start) (0) | 2024.06.10 |
---|---|
AWS EC2에 Next.js 프로젝트 배포 (1) | 2024.06.07 |
react와 vue 비교(데이터 바인딩과 데이터 흐름) (0) | 2024.01.05 |
session과 jwt 기반 인증 방식 장단점 (0) | 2023.11.12 |
Storybook createPortal 관련 에러 (Error: Target container is not a DOM element.) (1) | 2023.11.02 |