[Error] 새로고침 이후 로그인/로그아웃 토글이 되지 않을 때

firebase를 이용해서 로그인 기능을 구현하고 난 뒤 로그아웃 기능까지 구현 완료했다.

그리고 난 뒤에 currentUser가 있을 때는 로그아웃 버튼을, 없을 때는 로그인 버튼이 보이도록 삼항 연산자를 이용해 구현했는데, 새로고침하니까 로그인이 되었음에도 로그인 버튼이 웹페이지에 보였다.

 

그래서 로그인 버튼을 다시 눌렀더니, 로그인이 되어 있다는 의미로 로그아웃 버튼으로 다시 바뀌는 것이다.

이런 버그는 왜 생기는 걸까, 고민하다가 currentUser가 있다는 것보다 렌더링이 먼저 되서 그런거라는 생각이 들었다.

 

그래서 setTimeout() 함수를 이용해서 currentUser가 있는 지 확인하고 있다면 '로그아웃'을, 없다면 '로그인' 버튼이 나오도록 구현했다.

 

아래 코드가 해결한 코드의 일부이다.

...

const [isSign, setIsSign] = useState(null);

....


// 새로고침했을 때 user가 있는지 없는지 판단하기
  setTimeout(() => {
    if (authService.currentUser) {
      setIsSign(true);
    } else {
      setIsSign(false);
    }
  }, 1000);

...

{isSign !== null ? (
                    isSign ? (
                      <button onClick={logoutBtn}>로그아웃</button>
                    ) : (
                      <button onClick={openModal}>로그인/회원가입</button>
                    )
                  ) : null}
                  
                  ...

 

이런 식으로 setTimeout() 함수를 이용해서 구현하니 새로고침해도 제대로 user의 상태를 확인할 수 있었다.

 

처음에는 발견하지 못한 에러였는데, 우연히 새로고침 한 뒤로 문제가 있다는 걸 알게 되었고 다행히 해결했다.

 

 

---

setTimeout()에 대한 보다 자세한 내용은 아래 링크를 통해 알수 있다.

https://developer.mozilla.org/ko/docs/Web/API/setTimeout

setTimeout() - Web API | MDN