a = b === c
a = b === xxx && yyy
//same as
if (b === xxx) {
a = yyy;
} else {
a = false;
}
firebase 로그인 유지
로그인 페이지 측에서 Login 함수에 setPersistence(auth, browserSessionPersistence)를 사용하면 로그인 성공시 session 스토리지에 session 인증정보가 저장되도록 하였다.
그리고 각 페이지에 useEffect와 auth.onAuthStateChanged()로 마운트 시 로그인 여부에 따라 로그인 state가 바뀌도록 하고, state에 따라 jsx단에서 보이는 요소들이 다르도록 삼항 연산자로 구현해보았다. 그리고 로그인 이후 다른 페이지에서 새로고침하면
이와 같이 비로그인 화면이 잠깐이지만 꽤 오랫동안 보이다가 로그인 사용자 화면으로 돌아온다. 이는 state가 바로 반영 안되는 특성 때문인 것 같다. 분명 문제가 있는 접근법이다.
결론적으로는 login state를 따로 만들어주는 것이 아닌 앞서 로그인 시에 sessionStorage에 인증정보를 저장해주었으니 이 저장된 firebase:authUser Key의 존재 유무에 따라서 화면에 뿌려지는 jsx가 다르도록 sessionStorage.getItem(key)를 이용해야한다.
그리고 이를 적용한 페이지에서는 새로고침을 하면 화면이 깜빡임조차 없이 로그인 상태가 유지되어 나타나는 것을 확인할 수 있었다.
FE Developer