이전 포스팅에서 로그인 성공 후 응답으로 돌아온 토큰을 로컬스토리지에 저장하는 것까지 성공했다.
이후 로그인이 된 상태를 유지해야 하고 로그인 여부에 따라 다른 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>요렇게 링크를 해주면 끝!
'Web > React' 카테고리의 다른 글
| React Daum Postcode(카카오 우편번호 서비스) (1) | 2024.11.29 |
|---|---|
| React axios 통신 DELETE 메서드 400 에러 (0) | 2024.04.08 |
| React 자체 로그인, jwt 토큰 로컬스토리지에 저장 (0) | 2024.04.06 |
| React, RN 프로젝트 시작 명령어 (1) | 2024.04.01 |
| [React] 리액트 라우팅 URL 경로 분리 (0) | 2024.03.12 |
