React) useContext 사용법

useContext란?

전역적으로 필요한 prop을 props 전파를 하는게 아니라 store같은 저장장치에 넣고 쓴다는 개념

프롭스 드릴링(프롭스가 하위 컴포넌트로 파고파고파고파고 또 파고 들어가는 현상)을 피하고 싶을 때 쓰는 문법.

props 체이닝이 없이도 값을 전달하고 싶을 때 사용한다

 

context 설정법

api라던가, store, context같은 폴더에 파일을 만들어서 따로 관리한다.

React 라이브러리를 import하고, createContext 메소드에서 관리하고 싶은 상태값을 입력(구독)한다.

import React from "react";

const AuthContext = React.createContext({
  isLoggedIn: false,
});

export default AuthContext;

그런 다음에,  App.js 같은 전역적으로 뿌릴 수 있는 곳에서 <AuthContext.Provider> <AuthContext.Provider/> 를 이용해 제공한다.

  <AuthContext.Provider> // context이름에 .Provider를 붙여야 한다.
      <MainHeader isAuthenticated={isLoggedIn} onLogout={logoutHandler} />
      <main>
        {!isLoggedIn && <Login onLogin={loginHandler} />}
        {isLoggedIn && <Home onLogout={logoutHandler} />}
      </main>
  </AuthContext.Provider>

 

 

 

 

context 사용법

전역적으로 뿌린 context를 받아먹는 방법이다.

이때, 전통적인 방법과 최신 방법이 있다.

 

 

전통적 방법

app.js같은 곳에서 Provider를 사용해서 전역적으로 제공한걸,

받는 곳에선 Consumer로 받으면 된다.

(AuthContxt는 우리가 만든 context 객체 이름이어서 정하기 나름이다.)

<AuthContext.Consumer>
    {(ctx)⇒ {
    ctx.isLoggedIn ? …
    }}
</AuthContext.Consumer>

Consumer 태그 안에서 콜백함수를 쓸 수 있는데, 이때 받는 패러미터는 context 변수이다. 이를 map으로 뿌리던 어떻게 하던 맘대로 하면 된다.

 

 

최신 방법

컴포넌트 안에서 useContext 훅을 활용한다.

context객체를 useContext훅에 제공하기만 하면 이제 마음대로 꺼내서 쓸 수 있게 된다.

const Login = () ⇒ {
	const ctx = useContext(AuthContext)
	...
}

요새는 사람들이 이 방법만 쓰는 듯 하다.

 

그러나 엄밀히 말하면 useContext는 contextAPI는 아니다.

 

contextAPI는 React.createContext, Context.Provider, Context.Consumer 같은 것들이고,

useContext는 context를 더 쉽게 사용하기 위해 고안된 훅일 뿐이다.