[REACT] beforeunload 페이지 나갈때 / 새로고침 할때 alert 띄우기

beforeunload 이벤트는 사용자가 일반적으로 페이지를 닫거나 새로고침할 때, 브라우저를 닫을 때, 주소 표시줄에 다른 URL을 입력하거나 링크를 클릭할 때 발생하며, 페이지를 닫기 전에 어떠한 조치를 취할 수 있게 제공합니다.

 

주로 사용자에게 변경사항을 저장할 것인지 여부를 확인하거나, 애플리케이션에서 사용 중인 리소스를 정리하는 등의 작업을 수행할때 활용됩니다.

 

 

🔆 React 에서 사용하기

useEffect(() => {
    const handleBeforeUnload = (event) => {
      event.preventDefault();
      event.returnValue = ''; // 더이상 지원되지 않는 속성 이라고 한다. 작성하지 않아도 무방
    };
    window.addEventListener('beforeunload', handleBeforeUnload);
    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, []);

 

 

보안이슈?인지 크롬에서 제공되는 창 외에 커스텀 메세지로 만든 confirm창이

제대로 나오지 않아서 우선 modal로 구현했는데 ㅠㅜ..

더 찾아봐야겠다 .. ! 🤔

근데 진짜 이유가 뭐지,, window.confirm / window.alert 다 안되는데..,,🤯

 

 

 

❤️ 도움주신분 :

https://medium.com/@stheodorejohn/load-unload-and-beforeunload-event-listeners-in-react-significance-use-cases-best-practices-59b31ffb5097