React_useState를 활용한 Cart

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>

   

    )

   

}