Context API

React v16.3 이후로 추가된 기능으로, 전역 상태 관리를 위한 기능을 제공한다. 좀 더 정확히 말하자면, 전역상태관리를 하기 보다는 기존 로컬 상태를 종속성 주입 형태로 변환하여 이벤트 버스를 통해, props drilling을 회피하기 위한 용도로 사용된다. Context API 는 컴포넌트가 상태관리를 공유할 수 있도록 트래킹을 도와주고, 실제 상태변경은 useState 및 useReducer 등의 기존 react hook이 진행한다.

createContext

Context API를 사용하기 위해서는 Provider 와 Consumer 를 사용해야 한다. 전역 상태관리를 적용시킬 최상단 부모 컴포넌트에 Provider 를 래핑하는 것으로, Consumer 의 호출을 감지하게 된다.

// context.js
const AuthContext = React.createContext({
  isLoggedIn: false,
  onLogout: () => {},
  onLogin: (emali, password) => {},
});

export default AuthContext;

// Provider.js
...
...
const [isLoggedIn, setIsLoggedIn] = useState(false);
...
...
  return (
    <AuthContext.Provider value={{isLoggedIn : isLoggedIn}}>
      <MainHeader />
      <Main>
        {!ctx.isLoggedIn && <Login />}
        {ctx.isLoggedIn && <Home />}
      </Main>
    <AuthContext.Provider/>
  );

useContext

Consumer 컴포넌트에서 Provider 가 제공하는 데이터에 접근하는 함수이다.

const Navigation = () => {
  const { isLoggedIn, onLogout } = useContext(AuthContext);

  return (
    <nav className={classes.nav}>
      <ul>
        {isLoggedIn && (
          <li>
            <a href="/">Users</a>
          </li>
        )}
        {isLoggedIn && (
          <li>
            <a href="/">Admin</a>
          </li>
        )}
        {isLoggedIn && (
          <li>
            <button onClick={onLogout}>Logout</button>
          </li>
        )}
      </ul>
    </nav>
  );
};