[도르멍] 브라우저 새로고침 방지하기

 

프로젝트를 진행하며 데이터를 입력 받는 폼에서 새로고침을 할 경우 방지하는 창이 필요하다 판단했고

이리저리 찾아본 결과 브라우저 네이티브 기능인 beforeunload 이벤트를 사용해서 저 창을 띄울 수 있다는 것을 알게 되었다

 

---

beforeunload

beforeunload 이벤트는 사용자가 페이지를 떠나기 전(새로고침, 탭 닫기, 브라우저 종료, 다른 URL로 이동) 실행되며

브라우저 네이티브 기능으로, 사용자가 페이지를 떠나기 전 경고 메시지를 표시하거나 특정 작업을 수행할 때 사용된다.

 

특징

• 브라우저가 페이지를 떠나기 직전에 이벤트 발생
• 주로 사용자 확인 메시지를 띄우는데 사용 됨
• 브라우저마다 다르게 동작하며, 최신 브라우저에는 보안 정책 상 커스텀 메시지를 사용할 수 없음

 

사용 방법 (Next.js 기준)

const MultiStepForm = () => {
  useEffect(() => {
    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
      e.preventDefault();
      e.returnValue = ''; // 일부 브라우저에서 필요로 함
    }
    
    window.addEventListener('beforeunload', handleBeforeUnload);
    
    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    }
    
  },[])
  
  return <></>
}

export default MultiStepForm;

• handleBeforeUnload 이벤트 - 사용자가 페이지를 닫거나 새로고침하려고 할 때 트리거
• e.preventDefault() - 기본 동작 방지. 브라우저가 기본적으로 페이지를 떠날 때 경고 메시지를 표시하지 않도록 막음
• e.returnValue = '' - beforeunload 이벤트에서 경고 메시지를 표시하기 위해 브라우저에서 요구하는 값
• window.addEventListener('beforeunload', handleBeforeUnload)
  • 브라우저의 window객체에 beforeunload 이벤트 리스터를 추가하여 handleBeforeUnload 함수가 트리거 되도록 설정
• window.removeEventListener('beforeunload', handleBeforeUnload)
  
  • beforeunload 이벤트 리스너를 제거하여 메모리 누수와 같은 문제 방지

 

요약

특징	beforeunload
트리거 시점	페이지를 떠나기 직전
사용 목적	작업 중인 데이터 보호, 사용자 경고 메시지 표시
이벤트 데이터	event.returnValue를 설정해 경고 메시지 표시
제한 사항	커스텀 메시지 제한(브라우저 보안 정책)

 

 

---

다음 시간에는 popstate, 브라우저 앞으로 뒤로 클릭시의 내용을 담아보도록..하겠다...