[React + Javascript] 뒤로가기 막기(이벤트 최소화)

이성헌·2021년 7월 31일

JavaScript React popstate 뒤로가기 뒤로가기 막기 최소화 크롬

React

목록 보기

2/4

사용자가 뒤로가기를 눌렀을 때, 이를 막는 팝업을 띄우는 이슈를 처리할 일이 생겼다.

history.pushState(null, null, location.href);
window.onpopstate = function(event) { history.go(1); };

구글링을 통해 찾아본 결과, 위와 같은 방법이 가장 널리 쓰이는 뒤로가기 막기 방법 중 하나였다.

이 방법을 React 프로젝트에 적용하여 사용하였을 때, 다음과 같은 2가지 문제에 직면했다.

뒤로가기를 눌렀을 때, popstate 이벤트가 두 번 실행되는 문제

특정 브라우저에서 뒤로가기를 막고자 하는 화면에 포커싱을 주지 않고 뒤로가기를 누르면 뒤로 가기가 막히지 않고 되는 문제

1. 뒤로가기를 눌렀을 때, popstate 이벤트가 두 번 실행되는 문제

리엑트로 위의 방식으로 뒤로가기 막기를 구현한다면 다음과 같은 코드가 될 것이다.

  useEffect(() => {
    const preventGoBack = () => {
      history.go(1);
      console.log('prevent go back!');
    };
    
    history.pushState(null, '', location.href);
    window.addEventListener('popstate', preventGoBack);
    
    return () => window.removeEventListener('popstate', preventGoBack);
  }, []);

위 코드를 실행했을 때, 다음과 같이 popstate 이벤트가 2번 실행되는 것을 알 수 있다.

왜 이런 상황이 발생하는 걸까?

이 상황을 이해하기 위해선 popstate 이벤트에 대한 이해가 필요하다.
Mozilla 의 공식 문서를 확인해보면,

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

history.pushState() 또는 history.replaceState()는 popstate 이벤트를 발생시키지 않는 것에 유의합니다.popstate 이벤트는 브라우저의 백 버튼이나 (history.back() 호출) 등을 통해서만 발생된다.

popstate 이벤트는 현재 활성화된 기록 항목이 바뀔 때 발생하며, 이에 영향을 미치는 이벤트는 브라우저의 뒤로가기나 앞으로가기 버튼 등에 의하여 반응한다는 것을 알 수 있다.

이 원리에 따라 브라우저에서 뒤로가기를 클릭했을 때 popstate 이벤트가 발생하여 등록된 함수가 콜백 된다.
이 등록된 함수에 history.go() 나 history.forward() 가 있다면, 세션 기록이 바뀌면서 한번 더 popstate 이벤트가 발생하는 것이다.

이를 해결하기 위해서

popstate는 history.pushState() 또는 history.replaceState()는 popstate 이벤트를 발생시키지 않는 것에 유의합니다.

이 부분에 주목할 필요가 있다. history.pushState()는 popstate 이벤트를 발생시키지 않는 다는 점을 이용해, 다음과 같이 코드를 수정할 수 있을 것이다.

  useEffect(() => {
    const preventGoBack = () => {
      // change start
      history.pushState(null, '', location.href);
      // change end
      console.log('prevent go back!');
    };
    
    history.pushState(null, '', location.href);
    window.addEventListener('popstate', preventGoBack);
    
    return () => window.removeEventListener('popstate', preventGoBack);
  }, []);