Context API로 전역상태 관리하기

리액트에서 제공하는 기술인 Context API를 통해서 전역상태해보자.
물론 redux, mobx등 다양한 외부 라이브러리들이 존재하지만 리액트에서 권장하고 제공하는 Context API도 있으므로 알아놓자.

컴포넌트에서 외부의 데이터를 받는 방법으로는 props를 통해서 받을수 있다.
그치만!!

props는 바로 위, 자신의 바로 위인 부모컴포넌트로부터 받는 데이터이다.
만약 컴포넌트들의 구조가 매우 복잡해서 A컴포넌트의 자식컴포넌트의 자식컴포넌트 .... 의자식컴포넌트인 B의 구조이며 A컴포넌트에서 제공하는 데이터를 (컴포넌트간 depth가 1000개라 상상..) B컴포넌트에서 props만으로 전달받아 B컴포넌트에서 사용한다면 A와 B사이에 있는 어마어마하게 많은 컴포넌트는 사용하지도 않는 데이터를 다리 역할을 위해서 단순히 props로.. props로 전달하고 있다.

이때 Context API를 통해, 즉 전역상태를 통해서 이러한 문제점을 해결할 수 있다.

이 부분은 바로 예시로 보며 확인하자.

//store/store.js
import React, { createContext } from "react";

export const JaeseonContext = createContext();

const JaeseonStore = (props) => {
  const infos = {
    favoriteFood: "apple",
    favoriteMovie: "superman"
  };

  return (
    <JaeseonContext.Provider value={infos}>
      {props.children}
    </JaeseonContext.Provider>
  );
};

export default JaeseonStore;

creatContext로 JaeseonContext를 만들고 그것을 리턴하는 JaeseonStore컴포넌트이다.
단순히 여기에선 JaeseonContext인 context를 리턴하는게 주된 내용이며 value={infos}를통해서 컨텍스트 데이터를 지정한다.

//App.js
import React from "react";
import { BrowserRouter, Route, Switch, Link } from "react-router-dom";
import "./styles.css";
import Home from "./pages/Home/Home";
import Food from "./pages/Food/Food";
import Movie from "./pages/Movie/Movie";
import JaeseonInfo from "./store/JaeseonInfo";

export default function App() {
  return (
    <JaeseonInfo>
      <BrowserRouter>
        <Link to="/">HOME</Link>
        <Link to="/Food">Food</Link>
        <Link to="/Movie">Movie</Link>
        <Switch>
          <Route path="/" exact>
            <Home />
          </Route>
          <Route path="/Food" exact>
            <Food />
          </Route>
          <Route path="/Movie" exact>
            <Movie />
          </Route>
        </Switch>
      </BrowserRouter>
    </JaeseonInfo>
  );
}

이 컨텍스트를 사용할 컴포넌트들을 묶어준다. (context.Provider로 묶는것이다.)

//pages/Food/FoodChild2
import React, { useContext } from "react";
import { useHistory } from "react-router-dom";
import { JaeseonContext } from "../../store/JaeseonInfo";

const FoodChild2 = () => {
  const contextData = useContext(JaeseonContext);
  const history = useHistory();
  return (
    <>
      {/* useContext사용 */}
      <div>
        <h1>Food Child2</h1>
        <p>This is Food child2</p>
        <p>my favorite food is {contextData.favoriteFood}</p>
        <button
          onClick={() => {
            history.push("/");
          }}
        >
          go Home
        </button>
      </div>

      {/* Context Consumer사용 */}
      <JaeseonContext.Consumer>
        {(value) => (
          <>
            <h1>Food Child2</h1>
            <p>This is Food child2</p>
            <p>my favorite food is {value.favoriteFood}</p>
            <button
              onClick={() => {
                history.push("/");
              }}
            >
              go Home
            </button>
          </>
        )}
      </JaeseonContext.Consumer>
    </>
  );
};
export default FoodChild2;

Context.Provider에서 제공하는 데이터를 사용할때는 두가지 방법이 있는 데 context.consumer를 이용하는것과 useContext 훅메소드를 이용하는 것이다.
context.consumer를 이용할땐 함수를 렌더링해야하며 인자로써 컨텍스트에서 관리하는 데이터가 존재하게 되고 이 인자인 value를 사용하여 전역상태인 데이터를 사용한다.

사용법이 솔직히 쉽진않다. 그치만 어떻게 사용하는지 왜 사용하는지 뭔지만 알고 정확하게 어떻게 사용하는 방법에 대해선 구글링하면 된다...