popstate 이벤트와 Cancelable

 

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

popstate - Web API | MDN

회사 업무로 popstate 이벤트를 감지해서 리액트 state를 처리해야 할 일이 있었다. 

이유는 컴포넌트 내에서 상태로 route를 해주도록 처리를 해야했기 때문.

앞으로 가는거야 그냥 액션 발생 시 state를 변경해주도록 하면 됐는데, 뒤로 갈때는 해당 페이지의 맨 처음 컴포넌트를 렌더링 해주어야 하기에 뒤로 가기 액션을 감지해서 처리해주기로 했다.

 

popstate 이벤트에 커스텀 함수를 인자로 넣어서 했었는데, 나는 잘 되었는데 다른 개발자 분이 비슷한 코드인데 안된다고 해서 당황했다. 뭐가 다른지 몰랐다.

 

알고 보니 나는 계속 해당된 페이지에서 테스트를 하느라 이미 stack에 기본 페이지가 잔뜩 쌓여있어서 실제로 뒤로 간 것이었는데 액션이 발생하지 않고 상태만 잘 변경되었다고 느낀 것이었다. 

 

그래서 그 분이 하신 것 처럼 액션 동작할 때 window.pushState 함수를 이용해서 현재 페이지를 스택에 저장시키는 방법을 쓰기로 했다.

이렇게 하면 액션이 발생하면 pushState가 동작해서 현재 페이지를 stack에 쌓을거고, popstate 기본이벤트가 발생하기 때문에 결국 제자리 페이지에 있게 된다. 

 

집에 와서 정리하다가 이 부분을 보고 preventDefault로 기본 이벤트를 막을 순 없을까 생각했는데, PopStateEvent 객체의 속성 중 cancelable의 값이 false 이기 때문에 기본 이벤트를 막는 것은 불가능 한 것 같다.

stackoverflow.com/questions/32432296/is-it-possible-to-e-preventdefault-in-window-onpopstate