[React] 새로고침 시 페이지 이동하기

구글에 how to detect page reload라고 쳤을 때 대부분 아래와 같은 코드가 나온다.

useEffect(() => {
    window.addEventListener("beforeunload", alertUser);
    return () => {
      window.removeEventListener("beforeunload", alertUser);
    };
  }, []);
  const alertUser = (e) => {
    e.preventDefault();
    e.returnValue = "";
  };

beforeunload 이벤트의 주요 용도는 사용자가 페이지를 떠날 때 경고 메시지를 표시하는 것이기 때문에

router.push와 같은 네비게이션 명령을 수행할 수 없다❗️

결론

• sessionStorage를 이용해 페이지 이동을 해야한다.

📄 코드

  useEffect(() => {
    if (window.sessionStorage.getItem('firstLoadDone') === null) {
      console.log('첫 로드');
      window.sessionStorage.setItem('firstLoadDone', '1');
    } else {
      console.log('리로드');
      window.sessionStorage.removeItem('firstLoadDone');
      router.replace('/');
    }
  }, []);