# 151 [udemy React 완벽 가이드 노트] Context 사용해보기

1단계 : 일반적인 컨텍스트 만들기

---

 

1. cart-context.js파일을 만든다. 

2. React.createContext를 한다. 

  (react를 호출하고 context를 만든다)

3. context를 기본값으로 초기화한다.  

  (나중에 자동완성을 쓸 수 있다)

4. 컨텍스트를 업데이트 할 수 있는 함수를 두개 추가해준다. 

     (1) addItem : 추가되어야 하는 item 항목을 받는 함수 

     (2) removeItem: 삭제 되어야 하는 항목의 id값을 받는 함수 

 

import React from "react";

const CartContext = React.createContext({
  items: [],
  totalAmount: 0,
  addItem: item => {},
  removeItem: id => {},
});

export default CartContext;

 

 

 React 공식홈

Context 객체를 만듭니다. Context 객체를 구독하고 있는 컴포넌트를 렌더링할 때 React는 트리 상위에서 가장 가까이 있는 짝이 맞는 Provider로부터 현재값을 읽습니다.
defaultValue 매개변수는 트리 안에서 적절한 Provider를 찾지 못했을 때만 쓰이는 값입니다. 이 기본값은 컴포넌트를 독립적으로 테스트할 때 유용한 값입니다. Provider를 통해 undefined을 값으로 보낸다고 해도 구독 컴포넌트들이 defaultValue 를 읽지는 않는다는 점에 유의하세요.

적절한 Provider를 찾지 못했을 때 쓰이는 값이다. 기억... 

 

 

 

2단계 : 컨텍스트 관리하기

(useState, useReducer 컴포넌트에서)

---

 

import CartContext from "./cart-context";

const CartProvier = props => {
  const addItemToCartHandler = item => {};

  const removeItemFromCartHandler = id => {};

  const cartContext = {
    items: [],
    totalAmount: 0,
    addItem: addItemToCartHandler,
    removeItem: removeItemFromCartHandler,
  };
  return (
    <CartContext.Provider value={cartContext}>
      {props.children}
    </CartContext.Provider>
  );
};

export default CartProvier;

 

컨텍스트가 시간에 따라 변경되거나

애플리케이션의 일부도 시간에 따라 업데이트 될 수 있도록 해준다.

cart-context.js에서 할 수도 있지만 새파일을 만들어 해주자.

 

이 컴포넌트는 CartContext 데이터를 관리하고

그 컨텍스트에 접근하려는 모든 컴포넌트에

컨텍스트를 제공하는 역할을 가지고 있다. 

 

이 컴포넌트로 CartContext.Provider에 접근할 수 있게 해준다

---

 

이 컨텍스트에 접근해야 하는 모든 컴포넌트를 

CartContext.Provider로 감싸게 만드는 방식으로 말이다. 

(그러려면 컨텍스트에 접근해야하는 컴포넌트를 

CartProvider로 감싸면 된다)

 

 

또한 컨텍스트의 데이터를 관리하기 위한 로직을 CartContext 컴포넌트에 추가할 수 있다.

다른 컴포넌트가 이 관리에 관해 다룰 필요가 없도록 로직을 한곳에 몰아주는 것이다.

 

 

 

 

cartContext를 추가하자: value프롭의 값

---

 

그것을 위해 도우미 상수를 추가하자. 거기엔 객체가 할당된다. 

  const addItemToCartHandler = item => {};
  const removeItemFromCartHandler = id => {};
  
  const cartContext = {
    items: [],
    totalAmount: 0,
    addItem: addItemToCartHandler,
    removeItem: removeItemFromCartHandler,
  };

 

 

 

(1) items, totalAmount :

컨텍스트 자체를 위해 설정한 필드 

시간이 지남에 따라 구체적인 컨텍스트 값으로 업데이트 될 것임

 

(2) 함수 두개가 addItem과 removeItem으로 저장됨 

addItemToCartHandler : 추가되어야 하는 item 항목을 받는 함수

removeItemFromCartHandler: 삭제 되어야 하는 항목의 id값을 받는 함수 

 

(3)

return (
    <CartContext.Provider value={cartContext}>
      {props.children}
    </CartContext.Provider>
  );

 

3단계 : CartProvider 컴포넌트로 감싸주기

(cart에 접근해야 하는 모든 컴포넌트를 )

---

import Cart from "./conponents/Cart/Cart";
import Header from "./conponents/Layout/Header";
import Meals from "./conponents/Meals/Meals";
import React, { useState } from "react";
import CartProvier from "./store/CartProvider";

function App() {
  const [open, setOpen] = useState(false);

  const onClickOpen = receivedState => {
    setOpen(receivedState);
  };
  return (
    <CartProvier>
      {open && <Cart onClickOpen={onClickOpen} />}
      <Header onClickOpen={onClickOpen} />
      <main>
        <Meals />
      </main>
    </CartProvier>
  );
}

export default App;

 

 

 

 

 

4단계 : useContext

(cart에 접근해야 하는 컴포넌트에서)

---

import { useContext } from "react";

import React from "react";
import CartIcon from "../Cart/CartIcon";
import CartContext from "../../store/cart-context";

import classes from "./HeaderCartButton.module.css";

const HeaderCartButton = props => {
  const cartCtx = useContext(CartContext);
  const onClickOpen = () => {
    props.onClickOpen(true);
  };
  return (
    <button className={classes.button} onClick={onClickOpen}>
      <span className={classes.icon}>
        <CartIcon />
      </span>
      <span>Your Cart</span>
      <span className={classes.badge}>{cartCtx.items}</span>
    </button>
  );
};

export default HeaderCartButton;

1) useContext를 import 해준다

2) 해당 변수 CartContext를 useContext에 전달해준다. 

   (provider컴포넌트가 필요한 것이 아니라 context자체가 필요한 것이기 때문에 CartContext를 넣어주는것)

  CartContext에 접근하기 위해서는 가장 가까운 Provider가 관리한다.

   (App컴포넌트에서 사용되는 CartProvider컴포넌트)

 

 

3) cartCtx에 할당해준다. 

 

  const cartCtx = useContext(CartContext);

 

4) useContext를 사용해 리액트는 컨텍스트가 변경될 때마다

HeaderCartButton컴포넌트를 다시 평가한다. 

업데이트 되면 CartProvider에서 변경된다.