리액트 페이지 뒤로가기 제어

브라우저에 있는 뒤로 가기를 실행했을 때 정말 해당 페이지를 떠날 것인지 Confirm 모달을 통해 True일 때만 페이지를 벗어날 수 있게 해야했다.

 

과거에도 이런 비슷한 작업을 한 적이 있고 제어할 수 없다 라는 결론이 나왔었는데 .. 기억의 오류였다.

과거 경험한것은 브라우저 종료를 제어할 수 있는가에 대한 것이었다.

 

먼저 React에서는 react router dom의 useHistory의 객체를 통해 해당 액션이 push인지 pop인지를 구분하고 컨트롤 할 수 있다.

 

하지만 내가 사용하는 react router dom의 버전은 V6 버전이였고, history객체는 사라지고 navigate로 대체되었다.

navigate에서는 해당 기능이 없었고 결국 다른 방법을 사용해야했다.

 

const handleEvent = () => {
   history.pushState(null, '', location.href)
   modal.on()
}

useEffect(() => {
    history.pushState(null, '', location.href)
    window.addEventListener('popstate', handleEvent)
    return () => {
      window.removeEventListener('popstate', handleEvent)
    }
  }, [])

history.pushState는 브라우저의 세션 기록 스택에 상태를 추가합니다.

ex) 페이지1 -> 페이지2(1)-> 페이지2(2)

페이지 이동 없이 URL만 변경하고 브라우저는 다른것을 로딩하지 않는다.

 

하지만 이 방법도 완벽하게 컨트롤하는것은 불가능하니 개발하는 서비스가 어느 환경에서 작동하는지 잘 파악하여 사용해야 합니다.

 

https://developer.mozilla.org/ko/docs/Web/API/History/pushState

History.pushState() - Web API | MDN

https://developer.mozilla.org/ko/docs/Web/API/Window/popstate_event

popstate - Web API | MDN

https://www.zerocho.com/category/HTML&DOM/post/599d2fb635814200189fe1a7