모바일 뷰에서 팝업이, 뒤로가기 제스처를 취했을 때 이전 페이지로 넘어가지 않고 팝업만 닫히게 구현하고 싶어요.

Question

안녕하세요.
이번에 웹뷰 뿐만 아니라 모바일 뷰까지 같이 개발을 진행하고 있는데, 팝업의 기능 구현에 어려움을 겪고 있어 질문을 남깁니다.

웹뷰 같은 경우는 바로 팝업을 닫을 수 있지만, 모바일 같은 경우에는 무심결에 뒤로가기 제스처를 통해서 팝업을 닫으려는 유저가 있을 수 있다고 생각합니다.
그래서 뒤로가기 제스처가 발동 시, 이전 페이지로 렌더링을 시도하는 것을 막고 해당 팝업을 unmount 시키고 싶은데 방법이 잘 생각나지 않네요.

**개발환경은 프론트 (react) 입니다.

그냥 간단하게 생각한다면 모바일 뷰일 때를 dom 으로 감지 후에 해당 팝업이 mount 된 상태에서 navigation(-1) 같은 동작을 감지하여, 이전 페이지로 이동 대신 팝업을 unmount 시키게, useEffect 등으로 감시하면 될 것 같은데, 어떻게 구현해야 될까요?

+ 현재 react-router-dom v6.2를 사용하고 있는데, useBlocker를 활용하면 해결될 것 같습니다..!
https://reactrouter.com/en/main/hooks/use-blocker

김태우 · Answer

React router dom V6이 되면서 history 기능이 빠졌는데요
대신 history 라이브러리를 이용하는 방법도 있을 거 같네요!

모달창을 열 때 history 스택에 쌓아두고 뒤로가기를 했을 때 모달창을 닫은 상태로 변경하면 될 수 있을 거 같아요!

이 글은 쿼리를 이용한 방법인데요 비슷한 상황이신 거 같아서 공유드려요!
https://blog.toktokhan.dev/mobile-web-react-modal-%EC%97%90%EC%84%9C-%EB%92%A4%EB%A1%9C%EA%B0%80%EA%B8%B0-%EC%B2%98%EB%A6%AC-d0a714858ffa