React Query (+custom hook으로 사용하기)

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