사용자가 중요한 정보를 입력하던 중 실수로 페이지를 벗어나는 것을 어떻게 방지할 수 있을까요?
최근 Next.js 기반 프로젝트를 진행하면서 이러한 페이지 이탈 방지 기능을 next-navigation-guard 라이브러리를 활용해서 구현할 수 있었는데요.
이번 글에서는 Next.js의 라우팅 방식과 next-navigation-guard 라이브러리가 어떻게 페이지 이탈 방지 기능을 구현하는지 살펴보겠습니다.
beforeunload 이벤트로 취소 가능const beforeUnloadHandler = (event) => {
// Recommended
event.preventDefault();
// Included for legacy support, e.g. Chrome/Edge < 119
event.returnValue = true;
};
const nameInput = document.querySelector("#name");
nameInput.addEventListener("input", (event) => {
if (event.target.value !== "") {
window.addEventListener("beforeunload", beforeUnloadHandler);
} else {
window.removeEventListener("beforeunload", beforeUnloadHandler);
}
<Link>: Next.js의 <Link> 컴포넌트를 통한 이동router.push(): 새 페이지로 이동 (히스토리에 추가)router.replace(): 현재 히스토리를 대체하며 이동router.refresh(): 현재 페이지를 클라이언트에서 다시 불러오기
history.state
history.pushState() or history.replaceState()로 저장popstate 이벤트
history.back(), history.forward() 호출시 발생popstate 이벤트의 event.state는 히스토리 스택 이동 후의 상태 (즉, 이동된 새 위치의 history.state)를 가리킴