1. 로그인 상태 전역 관리 - AuthProvider

AuthProvider ?

react에 내장된 훅으로 별도의 설치없이 사용가능한 기능
로그인 상태를 전역에서 관리할 수 있게 도와줌

사용 방법

1. useContext를 사용하여 커스텀 훅(AuthContext) 만들기

src / context / AuthContext.js_

import { createContext } from 'react'; // 커스텀 훅 선언
export const AuthContext = createContext(); // Auth Context 변수에 저장

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
// 자식요소에 유저 값과 로딩상태 전달 
  return (
    <AuthContext.Provider value={{ user, setUser, loading }}>
      {children}
    </AuthContext.Provider> // 자식요소를 감싸서 사용
  );
};

2. useAuth 훅 생성

src / hooks / useAuth.js_

import { useContext } from 'react';
import { AuthContext } from '../context/AuthContext';

const useAuth = () => {
  return useContext(AuthContext);
};

export default useAuth;

3. App.jsx에서 전체 컴포넌트를 감싸기

src / App.jsx_

import { AuthProvider } from './context/AuthContext';

 return (
    <AuthProvider>
      <div className="App">
        	<Router> 
          </Router>
      </div>
    </AuthProvider>
  );
} // 가장 최상단에 작성

⭐ 커스텀 훅을 만든 뒤 App.jsx에서 감싸줘야 하는게 포인트