개발자
모바일 뷰에서 팝업이, 뒤로가기 제스처를 취했을 때 이전 페이지로 넘어가지 않고 팝업만 닫히게 구현하고 싶어요.
안녕하세요. 이번에 웹뷰 뿐만 아니라 모바일 뷰까지 같이 개발을 진행하고 있는데, 팝업의 기능 구현에 어려움을 겪고 있어 질문을 남깁니다. 웹뷰 같은 경우는 바로 팝업을 닫을 수 있지만, 모바일 같은 경우에는 무심결에 뒤로가기 제스처를 통해서 팝업을 닫으려는 유저가 있을 수 있다고 생각합니다. 그래서 뒤로가기 제스처가 발동 시, 이전 페이지로 렌더링을 시도하는 것을 막고 해당 팝업을 unmount 시키고 싶은데 방법이 잘 생각나지 않네요. **개발환경은 프론트 (react) 입니다. 그냥 간단하게 생각한다면 모바일 뷰일 때를 dom 으로 감지 후에 해당 팝업이 mount 된 상태에서 navigation(-1) 같은 동작을 감지하여, 이전 페이지로 이동 대신 팝업을 unmount 시키게, useEffect 등으로 감시하면 될 것 같은데, 어떻게 구현해야 될까요? + 현재 react-router-dom v6.2를 사용하고 있는데, useBlocker를 활용하면 해결될 것 같습니다..! https://reactrouter.com/en/main/hooks/use-blocker
1window.addEventListener("popstate", (event) => {
2 console.log("뒤로 가기 버튼이 클릭되었습니다.");
3
4 // 이전 페이지로 이동을 막기 위한 조건을 추가
5
6 event.preventDefault();
7 console.log("뒤로 가기 이벤트를 막았습니다.");
8 // 여기에 추가적으로 수행하고자 하는 동작을 넣을 수 있습니다.
9 onClose();
10 // 이전 페이지로 이동할 수 있도록 다른 동작을 수행
11 console.log("뒤로 가기 이벤트가 수행되었습니다.");
12 });
답변 1
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
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2023년 12월 15일
React에서는 history.block을 이용해서 사용자가 페이지를 벗어나려고 할 때 막아줄 수 있습니다. 이 메소드를 사용해서 뒤로 가기 버튼을 눌렀을 경우 팝업이 닫히게끔 조작할 수 있습니다. 다음은 간단한 예시 코드입니다: ```javascript import { useHistory } from 'react-router-dom'; function PopupComponent() { const history = useHistory(); useEffect(() => { // history.block 메서드는 사용자가 페이지를 벗어나려고 하면 호출되는 함수를 인자로 받습니다. return history.block((location, action) => { if (action === "POP") { // 여기서 팝업을 닫는 코드를 작성합니다. // 팝업을 닫았으면 true를 반환하고 그렇지 않으면 false 반환합니다. return !closePopup(); } return true; }); }, []); // ... 나머지 코드 } ``` 위의 방법은 react-router v5의 예제이며, v6에서는 slightly different입니다. POP action이 발생하면 closePopup 함수(팝업을 닫는 실제 구현된 함수)가 호출되도록 했습니다. closePopup 함수의 결과에 따라서 실제로 페이지 전환을 할 것인지 결정하게 됩니다. 코드에 추가적인 수정이 필요할 것으로 보이며, 원하는 동작에 맞게 조절해주시면 될 것 같습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!