Context 소비하기 (useContext / use 훅)

Udemy React 강의 167번 정리

이번 강의에서는 Context를 제공한 뒤, 실제 컴포넌트에서 소비(consuming)하는 방법을 배웠다.

핵심은 props 대신 Context에서 값을 꺼내 쓰는 것이다.

1. Context를 왜 소비해야 할까?

현재 Cart 컴포넌트는 이런 역할을 한다.

• 장바구니 아이템 목록 출력
• 아이템이 없으면 fallback 메시지 출력
• 총 가격 계산

이전까지는 이 모든 데이터를 props로 전달받았다.
하지만 Context를 도입했으므로 이제는 props 없이 CartContext에서 직접 데이터를 가져와야 한다.

2. Context를 소비하는 방법 - useContext

기본 사용법

import { useContext } from 'react';
import { CartContext } from '../store/shopping-cart-context.jsx';

export default function Cart() {
  const cartCtx = useContext(CartContext);

  return (
    <>
      {cartCtx.items.length === 0 && <p>No items in cart!</p>}
      {cartCtx.items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </>
  );
}

핵심

• useContext(Context객체) 형태로 사용
• 반환값은 Provider에서 제공한 value
• 더 이상 props.items 같은 건 필요 없음

3. Context를 소비하는 방법 - use 훅 (React 19 or React 19+)

import { use } from 'react';

const cartCtx = use(CartContext);

useContext와 use의 차이

일반적인 React 훅(useState, useContext 등)은 if 문이나 반복문 안에서 사용할 수 없다.
하지만 use 훅은 예외적으로 if 블록 안에서도 사용할 수 있어 조금 더 유연한 사용이 가능하다.
다만 use 훅은 React 19 혹은 그 이상에서만 지원되기 때문에 현재 기준으로는 useContext가 더 안전하고 범용적인 방식으로 사용된다.

4. Provider에 value를 꼭 설정해야 하는 이유

Context를 소비하려면 반드시 Provider에서 value를 제공해야 한다.

<CartContext.Provider value={{ items: [] }}>
  <App />
</CartContext.Provider>

만약 value를 안 주면?

• 에러 발생
• Context를 읽을 수 없음
• UI가 비어 보이거나 앱이 깨짐

Context 기본값(default value)은 왜 중요할까?

Context 생성 시 이런 코드를 썼다.

const CartContext = createContext({
  items: [],
});

이 기본값의 역할은

• 자동 완성(IntelliSense) 지원!
• cartCtx.items 같은 접근이 IDE에서 바로 보임
• 실제 앱 실행 시 같은 Provider의 value가 덮어씀

즉, 개발자 경험을 향상시키기 위한 설정임.

6. 구조 분해 할당으로 더 깔끔하게 쓰기

export default Cart() {
  const { items } = useContext(CartContext);
  
  return (
    <div>
      {items.length === 0 && <p>No items in cart!</p>}
    </div>
  )
}

---

지금은 Context에 하드코딩된 값을 넣고 있음.
다음 강의에서는 Context를 state와 연결해서 실제로 장바구니 아이템이 추가되고 삭제되도록 만들 예정.