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