모바일 모달창에서 브라우저 백버튼 처리하기

모바일 웹앱을 개발하다보면 모달창을 사용하게 된다.
이때 사용자는 상단 멀리 있는 X 버튼을 누르기보단 브라우저의 백버튼을 누르게 된다.
그런데 리엑트의 경우 현재 url은 그대로인데 모달창만 visible state이 true가 된 상태이므로
(다른 프레임워크도 url이 바뀌지 않는 비슷한 상황일것이다)
백버튼을 누르게 되면 뒤 페이지로 돌아가게 된다.
이렇게 되면 기존에 고객이 모바일에 작성해놓았던 데이터들이 날아가겠된다. 치명적이다.

이 문제를 해결하기 위한 방법을 여러가지 고려해보았다. (현재 사용한 방법은 3번이다)

1. 백 버튼의 비활성화
   이 부분은 서칭 해보았는데 이는 가능하지 않다. 브라우저에서 강제한다. 이는 어떻게 할수가 없다.

2. 백 버튼 누를시 브라우저에서 제공하는 confirm 창을 생성하는 이벤트 핸들러를 등록한다. 백버튼으로 나가려하면 관련 정보가 사라진다고 경고를 주며 ok를 누르면 뒤로 돌아간다.

관련 코드는 이와 같다. componentWillUnmount로 이벤트 핸들러를 지우는 것을 잊지 말자.

const closeModalHandler = e => {
	e.preventDefault();
	e.returnValue = '';
};

useEffect(() => {
		window.addEventListener('beforeunload', closeModalHandler);
	return () => {
		window.removeEventListener('beforeunload', closeModalHandler);
	};
}, []);

이 방법은 괜찮은 방법이다. 하지만 사용자는 계속 백버튼으로 모달창을 끄길 원할 것이다. 엄지 손가락을 위로 올려서 모달창의 X를 누르기 위해 움직이는 것은 원하지 않는다.

3. 모달을 실행시에 쿼리문으로 url을 간단하게 생성한다.
   예를 들어 onModalHandler 와 같은 모달을 open을 trigger하는 함수에 history.push("/현재 url?modal) 이런식으로 url을 만든다. 이렇게 하며 화면 전환은 안되고 쿼리문만 url에 붙는다.
   그리고 백버튼을 눌렀을 때의 이벤트 핸들러에 모달창을 끄는 기능을 넣는다

관련 코드는 이와 같다.

	const history = useHistory();
	
    useEffect(() => {
		// brower back
		const back = () => {
			history.listen((_, action) => {
				if (action === 'POP' && visible) {
					setVisible(false);
				}
			});
		};
		back();
	}, [history, visible]);

이렇게 되면 고객이 백버튼을 눌렀을 때 모달창만 꺼진다. 백을 눌렀을 때 뒤로 돌아가는 일은 생기지 않는다.
이 방법을 제외하고 더 나은 방법이 있다면 제안해주면 좋겠다.

이처럼 모바일의 경우엔 데스크탑과 달리 브라우저의 상황에 맞추어 좀더 사용자의 경험을 생각하며 개발해야한다.