사용자의 인증 상태를 다양한 화면의 리액트 컴포넌트에서 쉽게 조회할 수 있도록 Context API를 사용해 AuthContext를 만들어주겠습니다.

이 Context는 매우 간단합니다. useState를 사용해 user 상태를 관리하며, user와 setUser를 Context의 value로 사용합니다.

contexts/UserContext.js

import React, {useContext, createContext, useState} from 'react';

const UserContext = createContext(null);

export function UserContextProvider({children}) {
  const [user, setUser] = useState(null);
  return (
    <UserContext.Provider
      children={children}
      value={{
        user,
        setUser,
      }}
    />
  );
}

export function useUserContext() {
  const userContext = useContext(UserContext);
  if (!userContext) {
    throw new Error('UserContext.Provider is not found');
  }
  return userContext;
}