1. 기능 구현의 필요성

• 한창 기능을 구현할 때는 미처 생각하지 못했던 문제인데 어느 정도 기능 구현을 완료한 후 디테일 한 부분을 체크하던 중 발견하게 된 문제였다.

• 새로운 다이어리를 등록하던 중 새로고침 시 현재 작성 중인 모든 내용이 날아가는 현상을 발견하여 사용자가 새로고침 시도 시 alert을 띄우도록 하는 기능의 필요성을 느꼈다.

2. Window: beforeunload 이벤트

• beforeunload 이벤트는 window, 문서(document) 및 해당 리소스가 언로드(unload) 되려고 할 때 작동한다.

• 이벤트 핸들러에 Event.preventDefault()가 호출되어야 한다.

• 사용자가 새로고침 하거나 창 닫기 시도 시 경고 알림으로 한번 더 확인 할 수 있는 과정을 거친다.

// 새로고침 방지 변수
const preventClose = (e: BeforeUnloadEvent) => {
  e.preventDefault();
  e.returnValue = ""; // Chrome
};

// 최초 마운트 시 실행
useEffect(() => {
  (() => {
    window.addEventListener("beforeunload", preventClose);
  })();
  return () => {
    window.removeEventListener("beforeunload", preventClose);
  };
}, []);

참고

• MDN - Window: beforeunload 이벤트
• MDN - returnValue 속성