화면을 가리는 UI (팝업, 다이얼로그, 액션시트 등등...)를 표시할 때 한 가지 문제가 있었다. 단순히 useState를 이용한 상태로 관리하면 안드로이드 기기에서 뒤로가기 버튼을 눌렀을 때 페이지가 뒤로 가버린다. 일반적으로 안드로이드 사용자는 앱에서 화면을 가리는 UI를 닫을 때 뒤로가기 버튼을 사용하기 때문에 웹 환경에서도 뒤로 가기 버튼을 이용해 해당 UI를 닫을 수 있다면 좋을 것이다. 어떻게 하면 좋을까?
일단 브라우저의 뒤로 가기 액션을 막을 수 있는 방법은 마땅히 존재하지 않는다. 뒤로 가기 액션이 발생했을 때 그것이 작동하지 않도록 막고, 나만의 코드를 실행할 수는 없는 것이다.
해시를 URL에 추가해서 history API에 기록하는 방법이 있다. 어떤 값을 해시로 사용해야할까? 매번 개발자가 임의의 값을 하드코딩하는 방법도 있겠지만, 좀 더 쉽게 사용할 수 있도록 react@18에서 추가된 useId를 사용했다.
state가 바뀌면 이를 해시와 동기화하고, 해시가 바뀌면 이를 state와 동기화하는 useEffect 코드를 작성했다.
한 가지 문제가 있다면 history API를 이용하기 때문에 UI가 열려있는 상태에서 history API를 조작하여 UI를 닫았는데 닫히지 않거나, 해시가 완전히 닫히기 전에 history를 조작하여 race condition이 생기는 문제가 있을 수 있다. UI가 열려있는 상태에서 route가 바뀔 때 경고문을 출력하도록 처리하고, UI를 완전히 닫히는 것을 기다릴 수 있도록 닫는 함수가 promise를 반환하도록 처리했다.
이런 아이디어를 모아 next-overlay라는 라이브러리를 만들어봤다.
