React 컨텍스트 활용: 두 가지 접근 방법으로 상태 관리하기

이온·2023년 9월 24일

react

목록 보기

6/6

1. 컨텍스트 생성

📍src>store>auth-context.js
이 파일에서는 컴포넌트가 아닌 컴포넌트를 위한 컨텍스트를 만들기 때문에 kebab-case로 네이밍

import React from "react";

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

export default AuthContext;

2. 컴포넌트 감싸서 컨텍스트에 접근하기 (전체 앱이라면 App.js)

📍src>App.js
나중에 auth-context.js로 이동하여 효과적으로 관리할 수 있도록 전체 앱을 컨텍스트를 제공하는 컴포넌트로 감싼다.
AuthContext는 컴포넌트가 아니므로 .Provider를 추가하고 value를 올바르게 설정한다.

return (
	✅<AuthContext.Provider
      ✅value={{
        isLoggedIn: false,
  // isLoggedIn이 변경될 때마다 리액트에 의해 업데이트 된다, 
  // 새로운 컨텍스트 객체는 리스닝 컴포넌트(소비하는 컴포넌트)로 전달된다
  		//✅ 로그아웃 핸들러도 이렇게 지정해준다
  		onLogout: logoutHandler,
      }}
    >
      ...
    </AuthContext.Provider>
)

3-1. [첫 번째 방법] AuthContext.Consumer 사용

📍src>components>MainHeader>Navigation.js

컨텍스트를 리스닝 컴포넌트(=사용할 부분,소비할 부분)에 가져온다.
사용할 부분 전체를 AuthContext로 감싸는데 이 또한 컴포넌트가 아니기에 .Consumer로 감싸준다. 내용을 중괄호로 묶고 함수를 만들어준다. props.isLoggedIn -> ctx.isLoggedIn으로 변경.

const Navigation = (props) => {
  return (
    ✅<AuthContext.Consumer>
      ✅{(ctx) => {
        return (
          <nav className={classes.nav}>
            <ul>
              ✅{ctx.isLoggedIn && ( ...
              ...
              )}
            </ul>
          </nav>
        );
      }}
    </AuthContext.Consumer>
  );
};
export default Navigation;

3-2. [두 번째 방법] useContext react hook 사용

useContext를 가져와서 AuthContext를 참조한다.(tapping) 상수로 만들어서 사용하기.

const Navigation = (props) => {
  ✅const ctx = useContext(AuthContext);

  return (
    <nav className={classes.nav}>
      <ul>
        ✅{ctx.isLoggedIn && (
        ...
      </ul>
    </nav>
  );
};

export default Navigation;