react에서 브라우저 종료, 새로고침 시 원하는 이벤트를 실행하고 싶을 때

[hoo00nn]

기본적으로 Javascript 에서 브라우저가 종료되거나 종료되기 직전에 이벤트를 발생시킬 수 있도록 beforeunload 또는 unload 와 같은 이벤트를 제공하고 있다.

하지만 이는 IE에서는 잘 동작하지만 보안상의 이유로 Chrome 에서는 동작하지 않도록 막혀있다 😢

그럼 브라우저 종료 시에 또는 새로고침 했을 때 어떻게 원하는 이벤트를 발생시킬 수 있을까?

한 가지 해결책은 react-beforeunload 라이브러리를 사용하는 방법이다. 개인적으로 왠만한 작은 기능들은 라이브러리를 사용하지 않고 직접 구현하는 것을 선호하는데 여러 삽질을 하다가 결국 사용하게 되었다 😞

사용방법은 아래와 같이 react hooks를 사용하는 것과 같이 useBeforeunload 를 가져와서 파라미터로 원하는 로직이 포함된 handler 함수를 넣어주면 끝이다.

import { useBeforeunload } from 'react-beforeunload';

const Component = () => {
  useBeforeunload(() => {
    console.log('브라우저 종료 또는 새고로침');
  });

 return <></>;
}

결국 라이브러리의 힘을 빌렸지만 추후에 해당 라이브러리가 어떻게 구현되어있는지 분석해 볼 예정이다 😄

추가로 한 가지 더 ! React에서 Form을 수정하고 다른 페이지로 이동하려고 할 때 confirm을 띄워주고 싶다면?

react-router-dom 에서 제공하는 prompt 를 사용하면 된다.