[ReactJS_Complete] React.createContext()

이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다.

 

 

⚛️ 기본 환경: IDE: VS code, Language: React

 

 

React.createContext()

: 컴포넌트에게 props를 사용하지 않고 필요한 데이터를 넘겨주며 사용할 수 있게 해 줌으로써 컴포넌트들이 데이터(state)를 더 쉽게 공유할 수 있도록 함

 

React.createContext() 사용법

1. React createContext() 선언

import React from 'react';
 
const AuthContext = React.createContext({
    isLoggedIn: false
});
// AuthContext: Component는 아니지만 Component를 포함하는 객체
 
export default AuthContext;
 

 

2. AuthContext가 필요한 Component 감싸기

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

⭐ AuthContext 자체는 component가 아니므로 Provider를 같이 사용하여 Component화

→ <AuthContect.Provider> 안의 Component들은 모두 AuthContext의 데이터를 공유

 * Provider 역할: 값 설정 및 전달

 

3. AuthContext 사용 선언

 - <AuthContext.Consumer>

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>
  );
};
 

 - useContext()

const Navigation = (props) => {
  const ctx = useContext(AuthContext);
 
  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 - 완벽 가이드 (2021)