Context API 사용법 (2)

저번에 Context API 로 전역적으로 값을 사용하는 법을 배웠습니다.
이번에는 사용하는 것 뿐만아니라, 값을 변경하는 법을 배워보겠습니다.

Custom Provider

저번 처럼 기본적인 Provider 가 아닌, 많은 기능을 가진 context를 만들기 위해서는 Custom Provider 에 대해서 이해할 필요가 있습니다.

Context API 의 추가적인 기능이 아니라, ES6 의 기능을 이용해서 Custom Provider 를 만들어 보겠습니다.

import { createContext, useState } from "react";

const CounterContext = createContext();
function Provider({ children }) {
  const [count, setCount] = useState(0);

  const contextValue = {
    count,
    increment: () => setCount(count + 1),
    decrement: () => setCount(count - 1),
    reset: () => setCount(0),
  };

  return (
    <CounterContext.Provider value={contextValue}>
      {children}
    </CounterContext.Provider>
  );
}

export { Provider };
export default CounterContext;

다음과 같이 만들고, 이전의 index.js 에서

import "./index.css";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Provider } from "./context/counter";

const el = document.getElementById("root");
const root = ReactDOM.createRoot(el);

root.render(
  <Provider>
    <App />
  </Provider>
);

방금 만든 Provider 로 변경해 줍니다.

사용하기

import { useContext } from "react";
import CounterContext from "./context/counter";

function App() {
  const { count, increment, decrement, reset } = useContext(CounterContext);
  return (
    <div className="app">
      <h1>context Value: {count}</h1>
      <button onClick={increment}>increment</button>
      <button onClick={decrement}>decrement</button>
      <button onClick={reset}>reset</button>
    </div>
  );
}

export default App;

사용법은 이전과 같습니다.