contextAPI

상태 관리 도구

contextAPI 사용방법

1. 상위컴포넌트에서 createContext로 변수값을 생성 및 export
2. 상위컴포넌트에서 return에 <변수.Provider value={...}> ... </변수.Provider>로 묶어준다.
3. 하위컴포넌트에서 해당 변수를 import
4. 하위컴포넌트에서 useContext로 해당 변수를 묶는다.
5. 구조분해할당을 통해 필요한 부분을 뽑아낸다.

간단한 contextAPI

• App.js

import { createContext } from "react";
import Parent from "./Parent.jsx";
export const context = createContext({
  name: "",
  age: "",
  sex: "",
  grade: [],
});

function App() {
  return (
    <context.Provider
      value={{
        name: "khw",
        age: "25",
        sex: "male",
        grade: ["3.46", "3.06", "2.58", "4.1"],
      }}
    >
      <Parent></Parent>
    </context.Provider>
  );
}

export default App;

• Parent.jsx

import Child from "./Child.jsx";

const Parent = () => {
  return <Child></Child>;
};

export default Parent;

• Child.jsx

import { context } from "./App.js";
import { useContext } from "react";
const Child = () => {
  const { name, age, sex, grade } = useContext(context);
  return (
    <>
      <div>name : {name}</div>
      <div>age : {age}</div>
      <div>sex : {sex}</div>
      <div>
        grade{" "}
        <ul>
          {grade.map((g) => (
            <li>{g}</li>
          ))}
        </ul>
      </div>
    </>
  );
};

export default Child;

실행 결과

기존에 props를 통해 넘기던 것과 다르게 필요한 하위 컴포넌트 부분에서
useContext를 이용해 사용할 수 있다.

contextAPI + useReducer

• App.js

import { createContext, useReducer } from "react";
import Parent from "./Parent.jsx";
export const context = createContext({
  count: 0,
});

const initialState = {
  count: 0,
};

const reducer = (state, action) => {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
};

function App() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <context.Provider
      value={{
        state,
        dispatch,
      }}
    >
      <Parent></Parent>
    </context.Provider>
  );
}

export default App;

• Parent.jsx

import Child from "./Child.jsx";

const Parent = () => {
  return <Child></Child>;
};

export default Parent;

• Child.jsx

import { context } from "./App.js";
import { useContext } from "react";
const Child = () => {
  const { state, dispatch } = useContext(context);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
    </>
  );
};

export default Child;

실행결과

App.js에서 contextAPI를 통해 하위 컴포넌트인 Child에서 받은
dispatch와 state를 통해 해당 실행을 하위 컴포넌트에서 하고
구체적인 state와 dispatch는 App.js에서 담당하여 처리한다.