useMutation을 활용한 장바구니 기능 UI 업데이트 문제해결

문제상황

포인트샵 UI	아이템 선택시 반영되어야 하는 부분

위와 같이 아이템을 클릭하면 선택한 아이템을 장바구니에 추가하는 api를 통해 장바구니에 선택한 아이템을 업데이트하고 장바구니와, 선택아이템 착용 미리보기 UI에서는 장바구니에 담긴 아이템이 즉각적으로 반영되고, 이에 따라 UI가 바뀌어야 하는데, api를 통해 동물별 장바구니 DB에 선택아이템이 추가되었으나 새로고침을 하지 않으면 UI가 업데이트 되지 않는 문제가 있었습니다.

---

기존 코드의 문제점

const addItemToCart = async (itemId: number, animal: string) => {
  try {
    const response = await axiosInstance.post(`items/cart/${itemId}?animal=${animal}`);
    console.log(response.data.message);
    setCartData(response.data);
  } catch (error) {
    console.error(error);
  }
};

기존 코드에서는 axios를 통해 아이템을 장바구니에 추가하는 비동기 요청을 처리합니다. 요청 성공 후, setCartData를 사용해 로컬 상태를 업데이트하려 했으나, 이 방식은 서버의 최신 상태를 클라이언트에 즉각 반영하지 못합니다.

---

해결

useMutation 사용

import { useMutation } from '@tanstack/react-query';

const addItemMutation = useMutation({
  mutationFn: async ({ itemId, animal }) => {
    const endpoint = `/items/cart/${itemId}?animal=${animal}`;
    await api.patch(endpoint, {});
  },
  onSuccess: async () => {
    console.log('Item added successfully');
    const updatedCartData = await fetchCartItems(selectedTab);
    setCartData(updatedCartData);
    updateSelectedItemImages(updatedCartData.cartItems);
    getCartData();
  }
});

핵심 개선점

1. 선언적 데이터 변경: useMutation을 사용하고 mutationFn에서 정의된 비동기 요청을 통해, 데이터 변경 작업을 선언적으로 관리합니다. 이를 통해 아이템 추가 또는 삭제 같은 비동기 작업 후의 성공, 에러 핸들링을 용이하게 합니다.

2. 자동 상태 업데이트: onSuccess 콜백에서 아이템 추가 성공 후, 서버로부터 최신 장바구니 데이터를 다시 가져와 클라이언트 상태를 업데이트합니다. 이는 UI가 항상 최신 상태를 반영하도록 보장합니다.

3. 즉각적 UI 반영: 상태 업데이트가 이루어지면, 변경된 상태에 따라 관련 컴포넌트가 즉시 재렌더링됩니다. 사용자는 아이템을 장바구니에 추가하거나 삭제하는 즉시, UI에서 변경 사항을 볼 수 있습니다.

---

useMutation 적용 후

아이템 추가, 삭제	리셋

---

결론

useMutation 을 활용한 트러블 슈팅을 통해, 장바구니 기능에서 발생한 UI 업데이트 문제를 해결하였습니다. 이를 통해 사용자는 새로고침 없이도 항상 최신 상태의 장바구니를 확인할 수 있게 되었습니다.