[myCart] 유저 컨텍스트(UserContext), 장바구니 컨텍스트(CartContext) 적용

 

유저 데이터의 경우에는 이곳 저곳에서 사용이 많이 될 것으로 

컨텍스트로 만들어서 관리하면 사용하기 쉽다. 

 

import { createContext } from "react";

const UserContext = createContext(null);

export default UserContext;

 

 

App.jsx에서 유저 컨텍스트를 가져온다.

// user context

import UserContext from "./contexts/UserContext";

  return (

    <UserContext.Provider value={user}>

      <div className="app">

        <Navbar user={user} cartCount={cart.length} />

        <main>

          <ToastContainer position="bottom-right" />

          <Routing addToCart={addToCart} cart={cart} />

        </main>

      </div>

    </UserContext.Provider>

  );

 

 

 

CartPage.jsx로 이동해서 useContext로 user 객체를 받는다. 

 

그래서 src 에 백엔드 프로필 주로를 직접 입력하는데,

 user가 있을 경우에 프로필을 출력하게한다. 

import { useEffect, useState, useContext } from "react";

// userContext로 user객체받음

import UserContext from "../../contexts/UserContext";

const CartPage = ({ cart }) => {

  const [subTotal, setSubTotal] = useState(0); //배송비 제외 합계

  const user = useContext(UserContext);

  //카트 수정될 때마다 합계 계산하기

  useEffect(() => {

    let total = 0;

    cart.forEach((item) => {

      total += item.product.price * item.quantity;

    });

    setSubTotal(total);

  }, [cart]);

  return (

    <section className="align_center cart_page">

      <div className="align_center user_info">

        <img

          src={`http://localhost:5000/profile/${user?.profilePic}`}

          alt="user profile"

        />

        <div>

          <p className="user_name">{user?.name}</p>

          <p className="user_email">{user?.email}</p>

        </div>

      </div>

 

 

 

이번에는 CartContext를 만든다. 

import { createContext } from "react";

const CartContext = createContext(null);

export default CartContext;

 

App.jsx에서 프로바이더로 감싸주고 cart랑 , addToCart를 보낸다.

그리고 라우팅에서 전달해줬던 props는 지운다.

  return (

    <UserContext.Provider value={user}>

      <CartContext.Provider value={{ cart, addToCart }}>

        <div className="app">

          <Navbar user={user} cartCount={cart.length} />

          <main>

            <ToastContainer position="bottom-right" />

            <Routing />

          </main>

        </div>

      </CartContext.Provider>

    </UserContext.Provider>

  );

 

 

라우팅에서도 CartPage와 SingleProductPage에 전달해줬던 props를 지운다. 

    <Routes>

      <Route path="/" element={<HomePage />} />

      <Route path="/products" element={<ProductsPage />} />

      <Route path="/product/:id" element={<SingleProductPage />} />

      <Route path="/signup" element={<SignupPage />} />

      <Route path="/login" element={<LoginPage />} />

      <Route path="/cart" element={<CartPage />} />

      <Route path="/myorders" element={<MyOrderPage />} />

      <Route path="/logout" element={<Logout />} />

    </Routes>

 

 

CartPage.jsx

const CartPage = () => {

  const [subTotal, setSubTotal] = useState(0); //배송비 제외 합계

  const user = useContext(UserContext);

  const { cart } = useContext(CartContext);

 

이번에는 useContext로 CartContext를 가져와서 사용하면된다.

 

마찬가지로 

SingleProductPage.jsx에도 적용한다.

const SingleProductPage = () => {

  const { addToCart } = useContext(CartContext);

 

 

바꿔도 잘 동작하는지 확인한다.