React 로그인 유지

로그인 후 새로고침 시 로그인이 풀리는 경우가 있다.
이 때 window.localStorage를 사용하자!

선언 양식

window.localStorage.setItem("[선언할 스토리지 명]", [스토리지 값.]);

사용 양식

window.localStorage.getItem("isLoginAdminPage")

로그인을 하는 창에서 isLogin 값을 스토리지에 선언함과 동시에 FALSE값으로 만들어준다
🔔왠지는 모르겠는데 일반 참 거짓 값은 인식하지 못해서 문자열로 넣어주었다.

LoginModal.js

로그인 모달 창에서는 로그인 초기 값을 FALSE로 저장하며
로그인이 성공하게되면 조건문에 FALSE값을 TRUE로 바꿔준다.

window.localStorage.setItem("isLoginAdminPage", "FALSE");

//...(생략)...

 const onClickLogin=  async() =>{ 
  window.localStorage.setItem("isLoginAdminPage", "TRUE");
 }
 //...(생략)...

AdminPage.js

바뀐 값을 부모페이지에서 받아와서 배경화면의 블러처리와 모달창의 여부를 조건문과 함께 설정해준다.

const isAdminLogin = window.localStorage.getItem("isLoginAdminPage");
//배경화면 블러를 관리함
const [onBlur, setOnBlur] = useState(true);
//유즈 이펙트를 통해서 isAdminLogin값이 바뀔때만 실행한다.
useEffect(()=>{
     if(isAdminLogin==="TRUE"){
       setOnBlur(false);
     }
},[isAdminLogin])

//...(생략)...

return(
{isAdminLogin === "FALSE"  && <AdminLoginModal open={onModal} close={closeModal}/>}
<div className={onBlur ? "blur" : "holebody"}>   
);