[axios] React 장바구니 기능구현 / CRUD

1. 장바구니 CREATE (post)

백엔드 분이 생성하신 장바구니 명세서에 따라

현 프로젝트에선 리액트 쿠키를 이용해서 로그인 한 구매자만 장바구니 담기를 하기 위해 헤더에

Authorization: cookies.accessToken 을 넣어주고 보낸다.

 

/carts/products/(각각의 상품의 아이디 값)

을 useParams 를 이용하여 아이디를 설정해줬다.

const productId = useParams().productId;

 

++

(

구매자만 장바구니에 담을 수 있도록 하기 위해

로그인 할 때 받는 롤 값을 redux를 이용하여 store 에 저장한 뒤

SELLER 나 ADMIN 일 땐 담지 못하도록 설정

)

 

 

ProductInfo.jsx //
axios.post 를 이용하여 장바구니db에 생성 코드

버튼을 클릭하면 Cart.jsx 에서 받아 올 것이다.

  //장바구니에 추가하기

  const addCartProduct = async (id) => {
    const options = {
      headers: {
        Authorization: cookies.accessToken,
      },
      withCredentials: true,
    };

    if (sellerRole === "SELLER") {
      alert("판매자는 장바구니 담기 금지!");
      return navigate("/");
    }

    if (sellerRole === "ADMIN") {
      alert("관리자는 장바구니 담기 금지!");
      return navigate("/");
    }

    return await axios
      .post(
        `${process.env.REACT_APP_AWS_EC2}/carts/products/${id}`,
        { productId },
        options
      )
      .then((res) => {
        console.log(res);
        alert("장바구니 담기 성공!");
        navigate("/cart");
      })
      .catch((err) => {
        console.log(err);
        alert("이미 장바구니에 있습니다..");
      });
  };
  
  
  return
  ...
  <ButtonStyle onClick={() => addCartProduct(productId)} >
    장바구니에 담기
  </ButtonStyle>

 

2. 장바구니 READ (get)

마찬가지로 로그인 사용자 마다 장바구니가 다르기 때문에

헤더에

Authorization: cookies.accessToken 을 넣어주고 get 요청을 보낸다.

응답 받은 데이터를 useState 를 이용하여

const [cartData, setCartData] = useState([]);

cartData 에 값을 저장한다.

 

그리고 하단 return 에 map 과 뿌려줄 컴포넌트를 이용하거나 바로 작성하여

값을 꺼내서 뿌려준다.

 

 

ex)... 

{cartData.map((data, index) => 
	(<컴포넌트 />)
    	)}

 

그리고 페이지 이동 시 한번 get 해주기 위해 useEffect 를 사용!! 

 

 

Cart.jsx //
axios.get 를 이용하여 장바구니db에서 담기 성공한 상품들 조회

  const cartGetItem = async () => {
    const options = {
        headers: {
          Authorization: cookies.accessToken,
        },
        withCredentials: true,
  	};
    return await axios
      .get(`${process.env.REACT_APP_AWS_EC2}/carts?page=1&size=10`, options)
      .then((res) => {
        setCartData(res.data.cartProductDtoList);
      })
      .catch((err) => {
        console.log(err);
        console.log("장바구니 아이템 받아오기 에러");
      });
  };

  useEffect(() => {
    cartGetItem();
  }, []);

 

3. 장바구니 UPDATE (patch)

현 프로젝트에선 장바구니 수량 증가, 감소를 patch 를 이용했다.

+ 누르면 patch 요청으로 인해 db에서 현재 상품id 의 갯수가 1 증가

- 누르면 patch 요청으로 현재 상품 id의 갯수가 1 감소,,,

 

 

장바구니db와 장바구니페이지 데이터를 실시간으로 연동하기 위해서

이러한 방식을 택했는데

페이지를 리로드 시켜야 화면에 적용 된다는게 좀 걸리지만...

우선 기능작동을 위하여 현재 방식을 선택 했다.

 

그리고 수량에 따라 값 변경 값은 받아온 데이터로 곱하여 표시했다.

{`${data.productResponse.price * data.productsCount}`}원

 

 

증가 버튼 누른 결과 //

 

 

 

Cart.jsx //
axios.patch 를 이용하여 장바구니db와 실시간으로 동일하게 현재 아이템 수량 카운트 위한 것 (증가,감소)

 

여기서는 화면에 보여지는 값 변경이 없기 때문에

값 없이 보낼 데이터 값에 null을 넣었다.

 

id 값은 get 받아온 cartdata 값에서 map 돌린 데이터의 productId 이다.

아래 코드는 patch 의 틀!

  //! 장바구니의 각 상품 수량 증가함수
  const handleIncrease = async (id) => {

    return await axios
      .patch(
        `${process.env.REACT_APP_AWS_EC2}/carts/products/${id}/plus`,
        null,
        options
      )
      .then((res) => {
        console.log(res.data);
        window.location.reload();
      })
      .catch((err) => {
        console.log(err);
      });
  };

 

  //! 장바구니의 상품 수량 감소함수
  const handleDecrease = async (id) => {
    // const data = {}

    return await axios
      .patch(
        `${process.env.REACT_APP_AWS_EC2}/carts/products/${id}/minus`,
        null,
        options
      )
      .then((res) => {
        console.log(res.data);
        window.location.reload();
      })
      .catch((err) => {
        console.log(err);
        alert("상품 수량은 1개 이상 담으세요!")
      });
  };

 

 

4. 장바구니 DELTE (delete)

삭제는 간단하게 상품id 에 맞게 delete 요청을 보내면 db에서 삭제가 되어
리로드 후 get 해올 때 삭제된 장바구니 데이터를 표시하기 때문에 이렇게 작성하고 끝!

 

Cart.jsx //
axios.delete 를 이용하여 상품 아이디에 맞게 '삭제버튼' 누르면 삭제 요청

  //! 장바구니 삭제
  const handleDelete = async (id) => {
    return await axios
      .delete(`${process.env.REACT_APP_AWS_EC2}/carts/products/${id}`, options)
      .then((res) => {
        console.log(res);
        window.location.reload();
      })
      .catch((err) => {
        console.log(err);
      });
  };

 

 

간단하게 axios 와 db와 연동하여 장바구니 CRUD 를 구현 해 보았다..
CRUD 도 처음에는 어렵게 다가 왔지만, 계속 하다보니 적응이 되어 괜찮았다!!
신입은 그냥 CRUD 는 해야지 맞지,,👀