134. 사용자 정의 컨텍스트 제공자 구성요소 빌드 및 사용

그리고 별도의 컨텍스트 관리 컴포넌트를 만들고 싶다고 해보자
더 많은 로직을 가져오고 싶다면

import React, { useState } from 'react';

const AuthContext = React.createContext({
  isLoggedIn: false,
  onLogout: () => { },
  onLogin: (email, password) => { }
});

export const AuthContextProvider = (props) => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const logoutHandler = () => {
    setIsLoggedIn(false);
  }
  const loginHandler = () => {
    setIsLoggedIn(true);
  }
  return <AuthContext.Provider
    value={{ isLoggedIn: isLoggedIn, onLogout: logoutHandler, onLogin: loginHandler }}
  >
    {props.children}
  </AuthContext.Provider>
}

export default AuthContext;

 

Login.js 일부

import Button from '../UI/Button/Button';
import AuthContext from '../store/auth-context';

const Login = () => {
  const authCtx = useContext(AuthContext);
}

 

아래와 같이 auth-context 만을 모두 담아서 사용할 수 있다

 

이해는 잘 되지만 사용하기 전에 한 번 더 사용법을 복습해봐야 할 것 같다