Context와 State 연결하기

Udemy React 강의 168번 정리

이전까지 Context는 항상 빈 배열을 가진 정적인 값이었음.

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

이제 목표는 : Context를 실제 state와 연결해서 값을 읽는 것뿐 아니라 값을 변경하는 것까지 Context로 처리하기.

1. Context를 State에 연결하는 가장 기본적인 방법

기존 상태

const [shoppingCart, setShoppingCart] = useState({
  items: [],
});

이 state의 구조는 이미 Context value와 동일함.

{
  items: []
}

그래서 가장 단순한 연결 방법은 이거 :

<CartContext.Provider value={shoppingCart}>

결과

• Cart 컴포넌트에서 cartCtx.items 읽기 가능
• state가 변경되면 Context도 자동으로 갱신됨

즉, Context = state의 읽기 창구 역할

하지만 지금 상태에서는 Context로 값 읽기는 가능하지만 Context로 값 수정은 불가능함. 여전히 addItemToCart 같은 함수는 props로 전달 중..

즉, Context를 쓰고 있지만 prop drilling이 완전히 사라진 건 아님.

2. 해결책 : Context에 함수도 함께 넣기

Context에는 데이터뿐 아니라 함수도 담을 수 있다.

Context value를 직접 구성하기

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

그리고 Provider에 전달 :

<CartContext.Provider value={ctxValue}>

핵심 개념

• items → 상태 값
• addItemToCart → 상태를 변경하는 함수
• Context는 이제 읽기 및 쓰기 모두 가능해짐

Context 기본값에 함수를 넣는 이유는 딱 하나, 자동 완성 때문.

3. Context를 소비해서 state를 변경하기 (Product 컴포넌트)

이제 Product 컴포넌트에서는 더 이상 props가 필요 없다.

이전 방식

<Product onAddToCart={handleAddItemToCart />

Context 사용 방식

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

export default function Product({ id }) {
  const { addItemToCart } = useContext(CartContext);
  
  return (
    <button onClick={() => addItemToCart(id)}>Add to Cart </button>
    );
}

결과

• Product → Context → App state
• 중간 컴포넌트에 props 전달하지 않아도 됨
• prop drilling 제거

이제 구조는 이렇게 바뀜.

Product
  ↓ (Context)
CartContext
  ↓
App (state + 로직)

• 상태는 App에 있음
• 접근은 어디서든 Context로
• props는 UI 구성용으로만 사용

Context는 state 자체가 아님!
Context는 state와 state 변경 함수에 접근하는 통로 역할임.
Context에 함수를 넣으면 값을 읽는 것뿐 아니라 그 값을 변경하는 것도 가능함.
그 결과, prop drilling이 제거되고, 컴포넌트 결합도 감소되며, 구조가 훨씬 깔끔해짐.

---