[도르멍] 브라우저 뒤로가기 막기

브라우저 새로고침 방지를 이어서 찾아온 뒤로가기 방지하기..

새로고침 방지할 때는 beforeunload 이벤트를 사용해서 브라우저에서 제공하는 안내 팝업을 띄웠지만

뒤로/앞으로가기를 방지할 때는 popstate 이벤트를 사용하여 우리가 직접 만든 레이어팝업을 띄우고자 했다!

 

---

팝스테이트

popstate 이벤트는 브라우저 탐색(뒤로가기, 앞으로 가기)시 발생하며, 브라우저의 히스토리 스택의 상태가 변경될 때 트리거 됨

 

특징

• window.history API와 연동됨
• 사용자가 브라우저 탐색 버튼(뒤로/앞으로)을 클릭할 때 실행됨
• pushState 또는 replaceState 메서드로 변경된 히스토리 상태를 읽을 수 있음

 

사용 방법 (Next.js 기준)

const MultiStepForm = () => {
  // 레이어팝업을 띄우기위한 상태 변수 선언 - 초기값 false
  const [showNavigationPopup, setShowNavigationPopup] = useState(false);
  
  useEffect(() => {
    // PopStateEvent(브라우저 앞,뒤 버튼 클릭) 이벤트 처리 함수
    const handlePopState = (e: PopStateEvent) => {
      // 기본 이벤트 동작 방지, 뒤로가기 동작이 기본적으로 발생하지 않도록 함
      e.preventDefault();
      setShowNavigationPopup(true); // true로 상태변경하며 레이어 팝업 표시
    }
    
    // 현재 페이지 히스토리 상태 조작
    // pushState를 호출하여 새로운 히스토리 상태 추가 후, 브라우저의 주소 표시줄에 현재 경로 유지
    window.history.pushState(null, '', window.location.pathname);
    // popstate 이벤트 리스너를 추가하여 사용자가 뒤로가기를 눌렀을 때 handlePopState 함수 호출되도록 설정
    window.addEventListener('popstate', handlePopState);
    
    return () => {
      // popstate 이벤트 리스너를 제거하여 메모리 누수와 불필요한 이벤트 호출 방지
      window.removeEventListener('popstate', handlePopState);
    }
    
  },[])
  
  (
     <> 
      {showNavigationPopup && ( < LayerPopup /> )}
     </>을 반환합니다 .
  )
}

기본 MultiStepForm을 내보냅니다.

 

 

마주한 문제점

handlePopstate 함수가 호출 될 때 이벤트가 두 번,세 번, 네 번...!!! 이상 발생하는 문제를 마주해버렸다뒤로가기 버튼을 누르면 레이어팝업이 뜨지만 그 레이어팝업의 확인 버튼 또한 여러번 클릭해야 창이꺼지고 그제서야 페이지 이동되고....

 

아무리 여기 물어보고 저리 물어봐도 해결이 안돼... 해결 해줘ㅓㅓ

 

해결을 한다면 업데이트가 될 것.. 입니다