Context API

Context API?

React Context API는 애플리케이션의 여러 컴포넌트에서 전역적으로 데이터를 공유하고 접근할 수 있도록 설계된 React의 내장 기능이다. Props Drilling의 번거로움을 해결하고, Redux나 Zustand과 같은 외부 라이브러리 없이도 간단한 전역 상태 관리를 가능하게 한다.

Context는 마치 "주머니"와 같다고 보면 된다. 이 주머니 안에 공유하고 싶은 데이터를 넣어두면, 필요한 컴포넌트는 props를 거치지 않고도 직접 이 주머니에서 데이터를 꺼내 쓸 수 있다. 컴포넌트 트리 깊숙이 위치한 컴포넌트에게 데이터를 전달하기 위해 여러 중간 컴포넌트를 거치는 번거로움(Props Drilling)을 Context API를 통해 효과적으로 해결할 수 있다.

Context API 사용방법

1. Context 객체를 생성한다.

const cartContext = createContext()

2. Provider 컴포넌트 생성:

Context 객체의 Provider 컴포넌트를 사용하여 공유할 데이터를 하위 컴포넌트들에게 제공한다. 일반적으로 Context를 제공하는 Provider 컴포넌트를 만들어서 애플리케이션의 최상위 또는 필요한 부분에 렌더링한다.

export const CartProvider =  ({children}) => {
        const [cart, setCart] = useState([]);
        return(
            <cartContext.Provider value={{cart, setCart}}>
                {children}
            </cartContext.Provider>
        )
    }

위 예시에서 CartProvider는 cart라는 상태와 이를 업데이트하는 setCart 함수를 value prop을 통해 CartContext.Provider에게 전달한다. children prop은 Provider로 감싸질 하위 컴포넌트들을 나타낸다.

3. Context를 사용하는 함수 만들기

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

useContext()를 사용해 간단한 훅으로 만들어 준다.

이제 useCart()를 사용하면 언제 어디서든 cart와 seCart를 불러올 수 있다.

4. 사용 예시

function CartItem({ item, options, quantity}) {
  const {cart, setCart} = useCart()
  return (
    <li className="cart-item">
      <div className="cart-item-info">
        <img height={100} src={item.img} />
        <div>{item.name}</div>
      </div>
      <div className="cart-item-option">
        {Object.keys(options).map((el) => (
          <div key={el.id}>
            {el} : {data.options[el][options[el]]}
          </div>
        ))}
        <div>개수 : {quantity}</div>
      </div>
      <button
        className="cart-item-delete"
        onClick={() => {
          setCart(cart.filter((el) => item.id !== el.id));
        }}
      >
        삭제
      </button>
    </li>
  );
}

props없이 useCart()를 통해 cart와 setCart를 꺼내서 사용할 수 있게 됐다!

---

📌 정리

1. createContext()로 전역 공간 만들기
2. Provider로 감싸고 값 제공
3. useContext() 또는 커스텀 훅으로 데이터 사용
4. 전역 상태처럼 props 없이 손쉽게 사용 가능