NextJs - 브라우저 뒤로가기 이벤트

Hunter Joe·2025년 1월 14일

기술 스택

Next.js 15.1.x (app router)
shadcn/ui

브라우저 뒤로가기 이벤트

브라우저에서 뒤로가기 이벤트를 클릭하면 작성한 게시글이 어떠한 경고도 없이 사라지는 것을 방지하기 위해서 구현해봄

바로 코드로 들어가보겠음

export default function WritePage() {
  const [showModal, setShowModal] = useState<boolean>(false)
  
    const onClickContinue = () => {
    if (showModal) {
      deleteImage(imageUrl); // continue 버튼을 누르면 올라가 있는 이미지 삭제
      setShowModal(false);
      window.history.back();
    }
  };

  useEffect(() => {
    window.history.pushState(null, '', window.location.href);

    const handlePopState = () => {
      console.log('popstate triggered'); // test console
      setShowModal(true);
    };

    window.addEventListener('popstate', handlePopState);
	
    // clean up fn
    return () => {
      window.removeEventListener('popstate', handlePopState);
    };
  }, []);
  
  return(
  // ...code 
  {/* Escape Modal */}
    {showModal && <EscapeModal showModal={showModal} onContinue={onClickContinue} />}
  )
}