151. 장바구니 컨텍스트 추가

전체 장바구니 데이터를 모든 컴포넌트에서 사용하고 싶다

전체 state를 관리하는 폴더의 이름은 store라고 보통 이름 짓는다

store 폴더 내에 cart-context.js 파일을 생성한다

import React from 'react';

const CartContext = React.createContext({
  items: [],
  totalAmount: 0,
  addItem: (item) => {},
  removeItem: (id) => {},
});

export default CartContext;

 

이제 이 state를 관리하기 위해서 useState나 useReducer를 사용해야 할 것이다

CartProvider.js 파일 생성

 

이 컴포넌트의 목표는 CartContext 데이터를

관리하고, 그 컨텍스트를

접근하려는 모든 컴포넌트에 제공하는 것입니다

 

이제 CartProvider.js 를 사용할 수 있다

import CartContext from './cart-context';
const CartProvider = props => {
  const addItemToCartHandler = item => { };
  const removeItemFromCartHandler = id => { };
  const cartContext = {
    // 도우미 상수
    item: [],
    totalAmount: 0,
    addItem: addItemToCartHandler,
    removeItem: removeItemFromCartHandler

  };
  return <CartContext.Provider value={cartContext}>
    {props.children}
  </CartContext.Provider>
}

export default CartProvider;