전체 글
-
사용자의 페이지 이탈 감지하기Nextjs 2024. 1. 30. 17:06
사용자의 페이지 이탈 감지하기 AS IS 폼에 새로 입력하거나 수정하는 페이지에서 사용자가 이탈 시 모달을 띄워줘야 했다. 하지만 페이지 하나하나 버튼에 액션을 넣어주기는 비효율적이라고 판단했고, 공통적으로 관리할 수 있는 hook으로 빼고 싶었다. 또한 뒤로가기 버튼(브라우저 뒤로가기 아님)만 액션을 감지하고 있었지만, 요구사항은 브라우저의 탭닫기, 브라우저 뒤로가기, 새로고침에 대한 액션도 감지하고 막을 수 있어야 했다. 이런 것들을 한번에 관리를 하고 싶었고, _app.tsx나 layout으로 빼고 싶었다. 그런데 또 한가지 고민은 수정이 안되었으면 막지 않아도 된다는 요구사항을 충족시키려면 페이지 안쪽에서 폼의 isDirty나 데이터 비교가 필요했고, 그렇다면 루트에서 뻗어 나가면 안되겠구나 해서..