단순 코드 기록/React

React_useState를 활용한 Cart

일일일코_장민기 2024. 3. 18. 12:20
728x90
cart-context.js
import { createContext } from "react";
export const CartContext = createContext("");

 

App
import { useState } from "react"
import CartModel from "./components/CartModel"
import {CartContext} from"./store/cart-context"

export default function App(){

  const [shoppingCart, setShoppingCart] = useState([]);
 
  function handleAddItemToCart(cart){
    console.log(cart);
    setShoppingCart([...shoppingCart, cart]);
  }

  return (
    <>
    <h1>App</h1>
    <CartContext.Provider value={shoppingCart}>
      <CartModel onAddToCart = {handleAddItemToCart}></CartModel>
    </CartContext.Provider>
   
    </>
  )
}

 

CartModel
import { useRef } from "react"
import Cart from "./Cart"

export default function CartModel({onAddToCart}){
    const cart = useRef();
   
    return (
    <div>
        cart: <input ref={cart}></input>
        <button onClick={() => onAddToCart(cart.current.value)} >Add to Cart</button>
        <hr></hr>
       
        <Cart></Cart>
    </div>
    )
}

 

Cart
import { useContext } from "react"
import { CartContext } from "../store/cart-context"

export default function Cart(){    
    const items = useContext(CartContext);
    console.log("cart items: ", items);

    return (
        <ul>
            {items.map((row, idx) => {
                return(
                    <li key={idx}>
                        {row}
                    </li>
                )
            })}

        </ul>
   
    )
   
}