자바스크립트 뒤로가기 이벤트 감지하는 방법

사용자가 브라우저의 뒤로가기 버튼을 눌렀을 때 무슨 일이 일어날까요?
뒤로가기라는 사용자 경험을 단순히 "페이지 이동"으로만 생각합니다. 하지만 조금 더 깊이 들여다보면, 이 짧은 순간에 수많은 사용자 경험 문제가 있을 수 있습니다. 작성 중이던 글이 날아가거나, 결제 과정이 끊기거나, 심지어 중요한 데이터가 손실될 수도 있어요. 😰

오늘은 자바스크립트로 뒤로가기 이벤트를 감지하고, 이를 통해 사용자 경험을 어떻게 개선할 수 있는지 단계별로 정리해 보겠습니다. 🚀

`popstate` 이벤트로 처리하기

브라우저는 주소(URL) 변경이나 세션 히스토리 변화가 있을 때 popstate 이벤트를 발생시킵니다.
이 이벤트를 활용하면 사용자가 뒤로가기를 눌렀는지 감지할 수 있습니다.

popstate 이벤트는 사용자의 세션 기록 탐색으로 인해 현재 활성화된 기록 항목이 바뀔 때 발생합니다. 만약 활성화된 엔트리가 history.pushState() 메서드나 history.replaceState() 메서드에 의해 생성되면, popstate 이벤트의 state 속성은 히스토리 엔트리 state 객체의 복사본을 갖게 됩니다

다음과 같이 사용해볼 수 있어요 !

window.addEventListener("popstate", (event) => {
  console.log("뒤로가기 발생!", event);
});

브라우저마다 다르게 동작할 수 있으므로 주의가 필요합니다 !

popstate 호환성 스크린샷

브라우저는 popstate 이벤트를 페이지 로딩시에 다르게 처리합니다. Chrome(v34 이전버전) 와 Safari는 popstate 이벤트를 페이지 로딩시에 발생시킵니다. 하지만 Firefox 는 그렇지 않습니다.

만약 `alert`와 같이 인터럽트가 필요하다면? `beforeunload` 이벤트로 처리하기

혹은 beforeunload로 처리해볼 수도 있어요. 해당 이벤트는 window, 문서(document) 및 해당 리소스가 언로드 되려고 할 때 실행됩니다 ! 💪

window.addEventListener("beforeunload", (e) => {
  const message = "작성 중인 내용이 사라질 수 있습니다. 정말 나가시겠습니까?";
  e.returnValue = message; // 대부분의 브라우저에서 동작
  return message;
});

필요한 상황에 따라 적용해볼 수 있을거예요 ! 😉