[이슈해결노트] beforeUnloadEvent 페이지 변경 시에도 작동하는 오류

1. 문제상황

React.useEffect(() => {
    try {
      window.addEventListener('beforeunload', function(e) => {~~});
      return () => {
        window.removeEventListener('beforeunload', function(e) => {~~});
      };
    } catch (error) {
      console.log(error);
    }
  }, [isEditorVisible, iframSrc, quickAreaStore.isLogin]);

1) 해당 코드를 사용해서 edit 페이지에 새로고침, 창 닫기 기능을 추가했는데 뒤로가기 후 나타나는 페이지에서 새로고침을 누를 때, 팝업이 나타났다.

1. 해결 방법 고민

1) useEffect가 문제인 것인가 하고 console.log를 다 찍어봄

2) useEffect 내에서 return 문까지 돌고 나서 다시 addEventLisner를 타는 것을 알 수 있음

3) 그래서 dependency를 모두 바꿔가며 해봤지만 문제는 해결되지 않음

4) 팀장님께 return 문에서 동일한 이벤트를 삭제해야한다고 조언을 들음

5) 그래서 function 부분을 상위에 const로 선언함

1. 해결 방법 : 동일한 function을 지워야 addEventListener과 removeEventListener가 의미있다.

const beforeUnload = (e: BeforeUnloadEvent) => {
    e.preventDefault();
		//deprecated 된 내용이지만 chrome에서 beforeUnloadEvent를 동작시키기 위해 필요함 
    e.returnValue = 'unload';
  };

  React.useEffect(() => {
    try {
      window.addEventListener('beforeunload', beforeUnload);
      return () => {
        window.removeEventListener('beforeunload', beforeUnload);
      };
    } catch (error) {
      console.log(error);
    }
  }, [isEditorVisible, iframSrc, quickAreaStore.isLogin]);