전체 데모 앱에 Context API 적용하기

Udemy React 강의 171번 정리

이번 강의의 목표는 Cart 관련 state + 로직을 전부 Context로 옮겨서 prop drilling을 완전히 제거하는 것이다.

1. 시작 상태 : prop drilling이 남아 있던 구조

이전까지 구조는 대략 이러했다.

App
 ├─ Header (cart items 개수 필요)
 ├─ Product (add to cart 함수 필요)
 └─ CartModal
     └─ Cart (items + update 함수 필요)

그래서 App에서 onAddToCart, cartItems, onUpdateCartItemQuantity 이런 props들이 계속 내려갔다.

문제는 중간 컴포넌트들은 이 props를 사용하지도 않는데 단지 전달만 하기 위해 존재하게 되는 것이었다. 전형적인 prop drilling.

2. App 컴포넌트 : Context Provider 정리

Context에서 제공하는 값들

  const ctxValue = {
    items: shoppingCart.items,
    addItemToCart: handleAddItemToCart,
    updateItemQuantity: handleUpdateCartItemQuantity,
  };

<CartContext.Provider value={ctxValue}>
  {children}
</CartContext.Provider>

이제 Context는 단순한 값 공유를 넘어서 cart items를 읽고, cart 업데이트 함수를 호출하는 것까지 모두 가능해짐.

4. Product 컴포넌트 : props 제거 → Context 사용

Before

<Product onAddToCart={handleAddItemToCart} />

After

const { addItemToCart } = useContext(CartContext);

<button onClick={() => addItemToCart(id)}>Add</button>

• Product는 이제 props를 하나도 받지 않음
• 필요한 건 Context에서 직접 가져옴

5. Header 컴포넌트 : cart 개수도 Context로

Header는 장바구니 개수만 필요함.

const { items } = useContext(CartContext);
const totalItems = items.length;

• 이제 App에서 Header로 cart 관련 props를 넘길 필요 없음

6. CartModal & Cart 컴포넌트 정리

• CartModal은 단순히 Cart를 감싸는 wrapper이기 때문에 Context 필요 없음
• Cart 컴포넌트는 items와 update 함수가 필요하기 때문에 Context 사용

const { items, updateItemQuantity } = useContext(CartContext);

7. 최종 결과 구조

App
 ├─ Header (Context 사용)
 ├─ Product (Context 사용)
 └─ CartModal
     └─ Cart (Context 사용)

---