react) CONTEXT

CONTEXT

여러개의 컴포넌트에 영향을 미치는 state를 관리할 때, prop drilling(=prop chain)을 필요로 하는데,
이런 경우 prop으로 state를 계속해서 전달하게 되면 관리하기가 매우 어려워진다.
이런 어려움을 해결하기 위해 context를 배워보자.

 

CONTEXT는 모든 수준에서 props를 수동으로 전달하지 않고도 구성 요소 트리를 통해 데이터를 전달할 수 있는 방법을 제공한다.

💡 CONTEXT를 사용해보자

1. createContext()를 통해 context 생성

전역 데이터를 관리하기 위해서 React 패키지에서 제공하는 createContext라는 함수를 사용한다.
개념적으로 React Context는 전역 데이터를 담고 있는 하나의 저장 공간이라고 생각할 수 있다.

다음과 같이 createContext 함수의 인자로 해당 컨텍스트에 디폴트로 저장할 값을 넘긴다.

import React from "react";

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

export default AuthContext

 

2. context 저장하기

context를 사용하려는 컴포넌트에서 Provider로 감싸주면,

하위에 있는 모든 컴포넌트들은 React Context에 저장되어 있는 전역 데이터에 접근할 수 있다.

 

value속성값을 지정함으로써 context값을 설정할 수 있다.

function App() {
    const [isLoggedIn, setIsLoggedIn] = useState(false);

    const loginHandler = (email, password) => {  ...  };

    const logoutHandler = () => => {  ...  };

    return (
        <AuthContext.Provider value={{ isLoggedIn: isLoggedIn }}>
            <MainHeader onLogout={logoutHandler} />
            <main>
                {!isLoggedIn && <Login onLogin={loginHandler} />}
                {isLoggedIn && <Home onLogout={logoutHandler} />}
            </main>
        </AuthContext.Provider>
    );
}

 

3-1. context 접근하기 (Consumer)
Consumer를 통해 Context에 저장되어 있는 전역 데이터에 접근 할 수 있다.

Consumer는 Context 데이터를 전달인자로 받는 함수를 필요로 한다. (render props 패턴)
해당 함수는 jsx코드를 리턴해야한다.

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

⭐️⭐️ Provider와 Consumer를 함께 사용하면 Provider의 value 속성을 통해 값을 설정해주어야 한다.
            context를 생성할 때 설정한 디폴트 값을 사용하고 싶다면 Provider 없이 Consumer만 사용하면 된다.
           하지만 생성 당시의 디폴트값이 아닌 context에 값을 설정(수정)하여 사용하고 싶으면

           Provider에서 value 속성을 통해 값을 설정해주면 된다.

 

 

3-2. context 접근하기 (useContext)

Consumer 대신에 useContext hook을 이용하여 context에 접근해보자.

useContext hook을 import하고 선언한다.
접근할 context를 useContext 함수에 인자 값으로 넘겨주면 접근 가능!

import React, {useContext} from "react";
import AuthContext from "../store/auth-context";

import classes from "./Navigation.module.css";

const Navigation = (props) => {
  const ctx = useContext(AuthContext) //useContext hook!!

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

---

Context VS Props

 

자주 변화하는 상태값에는 context 보다는 prop가 더 적합하다..

모든 컴포넌트를 props 대신 context로 대체하는 것은 옳지 않다. 상황에 맞게 사용하자!

 

 

참고자료 : udemy 강의, daleseo 블로그 글