useEffect return과 beforeunload 순서

문득 useEffect return과 beforeunload의 실행 순서가 궁금해져서 직접 실험해보았다. useEffect의 개념과 beforeunload 개념을 안다는 조건으로 포스팅을 작성해본다.

 

✔️ useEffect 관련 링크

---

https://hyermione.tistory.com/56

[뷰쟁이의 리액트 시작하기] react useEffect로 랜더링 상태 관리하자

https://hyermione.tistory.com/92

React(리액트) clean-up 함수란? (메모리 누수 경고 해결 방법)

 

 

✔️ beforeunload 관련 링크

---

https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event

Window: beforeunload event - Web APIs | MDN

 

✔️ useEffect에서 return과 beforeunload 차이점

---

(상단의 개념들에 따라) useEffect에서 return은 컴포넌트가 unmount 될 때 실행되는 개념이고, beforeunload는 페이지를 뜰 때 실행되는 개념이다.

 

✔️ 두 함수의 실행 순서는 어떻게 되는걸까?

---

두 개념을 보고 있으니 갑자기 떠오르는 궁금증이 생겼다. 다른 페이지로 이동 시, 컴포넌트를 제거하고 페이지를 뜨게 되는걸까? 아니면 페이지 이동을 하고 컴포넌트가 제거되는걸까? 그럼 두 함수 중에 뭐가 먼저 실행될까?

해서 다음과 같은 코드를 임시로 만들었다. (나는 test용으로 addEventListener만 작성하였지만 사용에 따라 removeEventListener도 작성할 것을 추천한다.)

const Test = () => {

  useEffect(() => {
    console.log('들어옴');
    window.addEventListener('beforeunload', (event) => {
      event.preventDefault();
      window.alert('!!!');
    })
    return () => {
      console.log('나감');
    }
  }, []);

  return <div>테스트이다!</div>
};

export default Test;

페이지를 떠난다는 가정하에

예상 시나리오 1. '나감'이 먼저 콘솔에 찍히고, 이후 '!!!'의 알럿이 뜬다.
예상 시나리오 2. '!!!'의 알럿이 뜨고, 콘솔에 '나감'이라는 문구가 찍힌다.

 

✔️ 결과는 과연?

---

페이지를 뜨는 것은 beforeunload에 해당하기 때문에 해당 알럿이 먼저 뜨게 된다.

포스팅을 작성하는 와중에 이는 지극히 당연하다는 것을 깨달았다. useEffect return은 unmount(unload)인데, 이 직전에 뜨는 이벤트가 beforeunload아닌가... 왜 이걸 이제야 생각한거지? 아무튼 beforeunload event의 로직이 먼저 실행되며 useEffect return의 로직은 실행되지 않는다.