React/Next 애플리케이션에서 장바구니 사용하기.

이 가이드는 처음부터 직접 만들 필요 없이 카트 작업을 매우 쉽게 처리하는 데 도움을 주는 것을 목표로 합니다.

이제 고객이 한 번에 여러 제품을 구매하거나 나중에 사용할 수 있도록 저장할 수 있도록 장바구니를 만들 차례입니다.
그러나 0부터 카트 작업을 구축하는 주요 논리에 대해 걱정하지 마십시오. 이미 대부분의 작업을 수행했습니다.

요구 사항/전제 조건

원하는 IDE(코드 편집기)

패키지 관리자 → npm 또는 yarn.

React 또는 Nextjs 프로젝트에서 작업 중입니다.

Javascript 및 React에 대한 약간의 지식.

시작하자

먼저, 제품 추가, 제거 및 업데이트 등과 같은 카트 작업을 처리할 경량 쇼핑 카트를 설치해야 합니다.

따라서 다음 명령을 실행하십시오.npm i react-use-shoppingcart
또는yarn add react-use-shoppingcart
위의 명령 중 하나를 실행하면 패키지가 준비됩니다.

contextProvider 구성 요소를 App.js 파일로 가져오고 CartContextProvider 구성 요소에서 애플리케이션을 래핑해야 합니다. Context에 대한 자세한 내용을 읽을 수 있지만 지금 당장은 필요하지 않습니다.

수입 라인:import { CartContextProvider } from 'react-use-shoppingcart';
App.js

import { CartContextProvider } from 'react-use-shoppingcart';
import Navbar from './components/navbar';
import Product from './components/product';
import Cart from './components/cart';
function App() {
  return (
    <div className="App">
      <CartContextProvider>
        <Navbar />
        <Cart />
        <Product />
      </CartContextProvider>
    </div>
  );
}

이제 애플리케이션은 이미 생성된 사용자 지정 후크를 호출하여 앱의 모든 구성 요소에서 장바구니 작업을 사용할 수 있습니다.

따라서 Product.js라는 구성 요소 또는 페이지가 있다고 가정해 보겠습니다.

먼저 장바구니 논리를 처리하는 데 필요한 모든 항목이 포함된 객체를 반환하는 useCart 후크를 가져와야 합니다. hooks에 대해 자세히 알아볼 수 있습니다.
import { useCart } from "react-use-shoppingcart";
useCart 후크를 가져온 후 이제 다음과 같이 구성 요소 내에서 호출할 수 있습니다.

const { cartItems, removeFromCart, clearCart, totalPriceCart } = useCart();

또한 제품 배열이 다음과 같이 구성되어 있다고 가정해 보겠습니다.

const products = [
    {
      id: 1,
      name: "jacket",
      price: 500,
      image: "path/to/image"
      ...
    },
     {
      id: 2,
      name: "jeans",
      price: 100,
      image: "path/to/image"
      ...
    },
    {
      id: 3,
      name: "t-shirt",
      price: 254,
      image: "path/to/image"
      ...
    },
  ];

따라서 제품 구성 요소 또는 페이지는 다음과 같습니다.

Product.js

import { useCart } from "react-use-shoppingcart";

const products = [
    {
      id: 1,
      name: "jacket",
      price: 500,
      image: "path/to/image"
      ...
    },
     {
      id: 2,
      name: "jeans",
      price: 100,
      image: "path/to/image"
      ...
    },
    {
      id: 3,
      name: "t-shirt",
      price: 254,
      image: "path/to/image"
      ...
    },
  ];
  const Product = () => {
      const { addToCart } = useCart();
      return (
        <div className="container">
          {products.map((product) => {
            return (
              <div className="card" key={product.id}>
                <img
                  src={product.image}
                  alt="product image"
                />
                <h1>{product.name}</h1>
                <p className="price">{product.price}$</p>
                <p>
                  <button onClick={() => addToCart(product)}>Add to Cart</button>
                </p>
              </div>
            );
          })}
        </div>
      );
}
export default Product;

위의 코드는 모든 제품을 나열하고 클라이언트가 "장바구니에 추가"버튼을 클릭하면 제품이 카트에 추가됩니다.

제품이 장바구니에 추가된 후 클라이언트는 장바구니를 보고 특정 제품을 제거하거나 삭제하여 관리해야 합니다.

Cart 구성 요소가 어떻게 보이는지 예를 들어 보겠습니다.

Cart.js

import { useCart } from "react-use-shoppingcart";
const Cart = () => {
  const { cartItems, removeFromCart, clearCart, totalPriceCart } = useCart();
  return (
    <div>
      <div className="cartContainer">
        {cartItems.map(item => {
          return (
            <div className="cart" key={item.product.id}>
              <div>
                <div>
                  {item.product.name} - {item.product.price}$: - qty:
                  {item.qty}
                </div>
              </div>
              <div>
                <div>
                  <button onClick={() => removeFromCart(item.product.id)}>
                    remove
                  </button>
                </div>
              </div>
            </div>
          );
        })}
      </div>
      <div>
        <div>Total : {totalPriceCart}</div>
        <button onClick={clearCart}>clear</button>
      </div>
    </div>
  );
};
export default Cart;

cartItems는 장바구니에 담긴 기존 상품을 담고 있는 배열로 다음과 같은 구조로 되어 있습니다.

[ 
 {
   product:{
      id: 1,
      name: "jacket",
      price: 500,
      image: "path/to/image"
      ...
   },
   qty:5
 },
 {
   product:{
      id: 2,
      name: "blazor",
      price: 200,
      image: "path/to/image"
      ...
   },
   qty:3
 },
 ...
]

removeFromCart(producId)는 장바구니에서 특정 상품을 삭제할 때 사용하는 기능입니다.

clearCart는 카트를 비울 때 사용하는 기능입니다.

totalPriceCart는 장바구니에 있는 기존 제품의 총 가격입니다.

마지막으로 장바구니가 만들어지고 준비되었으므로 귀하의 역할은 클라이언트에게 깊은 인상을 줄 매력적인 UX/UI를 만드는 것입니다.

따라서 게시물이 도움이 된다면 마음에 들어하는 것을 잊지 마세요. 숙련된 개발자나 블로거라면 제 패키지나 블로깅 기술을 개선하는 데 도움을 주시기 바랍니다.

react-use-shoppingcart npm package .

Github repository .

차오!