Context API

React version 16부터 사용 가능한 리액트의 내장 API
props를 사용하지 않고 필요한 데이터(state)를 쉽게 공유

prop drilling

• 하위 컴포넌트로 전달하기 위해 중간 컴포넌트에 프로퍼티를 내려주는것

prop drilling 장점

1. 값 추적 용이
2. 코드 변경 파악 용이

prop drilling 단점

1. 중간 컴포넌트의 불필요한 프로퍼디 전달
2. 누락된 프로퍼티 인지 어려움
3. 프로퍼티 이름 변경 추적 어려움

Context API 사용 이유

1. prop drilling을 예방 하여 깔끔한 코드 사용 가능
2. 값을 필요한 컴포넌트에만 불러 사용 가능

Context API 사용 방법

createContext

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

const cartContext = createContext();

export function CartProvider({ children }) {
  const [cart, setCart] = useState([]);

  const addToCart = ({ quantity, options, id }) => {
    setCart([...cart, { quantity, options, id }]);
  };
  const removeCart = (id) => {
    setCart(cart.filter((el) => el.id !== id));
  };

  return (
    <cartContext.Provider value={{ cart, setCart, addToCart, removeCart }}>
      {children}
    </cartContext.Provider>
  );
}

export function useCart() {
  return useContext(cartContext);
}

Provider

import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import { BrowserRouter } from "react-router-dom";
import { CartProvider } from "./context/cartContext.jsx";

ReactDOM.createRoot(document.getElementById("root")).render(
  <BrowserRouter>
    <MenuProvider>
      <CartProvider>
        <App />
      </CartProvider>
    </MenuProvider>
  </BrowserRouter>
);

use

import data from "../assets/data";
import { useCart } from "../context/cartContext";

function Cart() {
  const { cart } = useCart();

  return (
    <>
          cart.map((el) => (
            <CartItem
              key={el.id}
              item={allMenus.find((menu) => menu.id === el.id)}
              options={el.options}
              quantity={el.quantity}
            />
          )

    </>
  );
}