React 로그인 상태 전역으로 관리하기(useContext)

이전 포스팅에서 로그인 성공 후 응답으로 돌아온 토큰을 로컬스토리지에 저장하는 것까지 성공했다.

이후 로그인이 된 상태를 유지해야 하고 로그인 여부에 따라 다른 UI를 보여줘야 한다.

많은 페이지의 UI를 다르게 띄워줘야하는데 페이지마다 로컬 스토리지의 토큰을 get 해와서 처리하는 것은 번거로울 것 같았다.

 

그래서 생각해낸 방법은 useContext를 사용해서 전역으로 로그인 상태를 관리하는 것이었다.

 

 

로그인 된 상태 true / 로그인 하지 않은 상태 false 로 처리해서 전역변수 처리를 한 다음

다른 UI를 띄워줘야할 때 true/false 값을 활용해 간단하게 처리할 수 있는 것이다.

 

해야할 것은 
1. LoginContext.jsx 생성하여 전역 변수로 선언해주기
2. 로그인하면 isLoggedIn 값을 true로 변경
3. 로그아웃하면 isLoggedIn 값을 false로 변경
4. 다른 컴포넌트에서 isLoggedIn 값 활용하여 다른 UI 띄우기 !

1. LoginContext.jsx 생성하여 전역 변수로 선언해주기

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

const LoginContext = createContext();

export const LoginProvider = ({ children }) => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  useEffect(() => {
    // localStorage에서 토큰을 가져와서 유무를 판별하여 isLoggedIn 상태 설정
    const token = localStorage.getItem('Token');
    setIsLoggedIn(!!token); // 토큰이 있으면 true, 없으면 false
  }, []);

  return (
    <LoginContext.Provider value={{ isLoggedIn, setIsLoggedIn }}>
      {children}
    </LoginContext.Provider>
  );
};

export const useLogin = () => useContext(LoginContext);

전역으로 사용할 isLoggedIn 변수를 useState로 관리한다.

그리고 처음 렌더링 될 때, 로컬스토리지의 토큰을 가져와서 상태를 true/false로 저장한다.

---

이후 전역적으로 로그인 상태를 관리하기 위해 app.js의 컴포넌트들을 <LoginProvider>로 감싼다.

<LoginProvider>을 사용하면 하위의 여러 컴포넌트에서 동일한 로그인 상태를 사용하고 업데이트 할 수 있게 된다.

function App() {
  return (
    <LoginProvider>
      <div className="App textFont">
        <Routes>
          <Route path="/user/*" element={<User/>} />
            <Route path="/admin/*" element={<Admin/>} />
        </Routes>
      </div>
    </LoginProvider>
  );
}
export default App;

---

2. 로그인하면 isLoggedIn 값을 true로 변경

import { useLogin } from '../../context/LoginContext';

const { isLoggedIn, setIsLoggedIn } = useLogin();

// 로그인
const handleLogin = async () => {
  try {
    console.log(studentInfo)
    const result = await API().post('/login', studentInfo); // 로그인 성공
    navigate('/user'); // 사용자 메인으로 이동
    localStorage.clear()
    localStorage.setItem('Token', result.data.accessToken)

    setIsLoggedIn(true);
  } catch (error) {
    // 에러처리
  }
};

로그인 컴포넌트에 와서 사용하겠다. 선언해준뒤 로그인이 성공했을 때 값을 true 로 변경한다.

---

3. 로그아웃하면 isLoggedIn 값을 false로 변경

로그인과 거의 동일하다. 값만 false로 변경하면 된다.

const handleLogout = () => {
    localStorage.clear()
    setIsLoggedIn(false);
    console.log(isLoggedIn)
}

로그아웃하는 함수

---

4. 다른 컴포넌트에서 isLoggedIn 값 활용하여 다른 UI 띄우기 !

메뉴바의 마이페이지 아이콘을 클릭했을 때

로그인 상태면 > 마이페이지

로그인 상태가 아니라면 > 로그인 페이지로 이동하게끔 했다.

const { isLoggedIn, setIsLoggedIn } = useLogin();
const navLink = isLoggedIn ? 'myPage' : 'login';

상태에 따라 navLink의 값이 다르게 들어가고

<Link to={navLink}><AiOutlineUser size={30} className='mr-2'/></Link>

요렇게 링크를 해주면 끝!

로그인 했을 때와 안 했을 때