React 새로고침 시 경고창 띄우기

React 에서 react-beforeunload 를 이용하여 새로고침 또는 뒤로가기 시 경고창을 띄우는 방법에 대해 알아보도록 하겠습니다.

들어가기 앞서

textarea 에서 특정 글을 작성하다가 갑자기 새로고침 되는 경우나, 작성하는 줄 까먹고 창을 모두 닫아 버리는 경우가 많습니다. 이러한 상황들을 방지하기 위해 새로고침 / 뒤로가기 시 경고창을 띄워 주는 것이 좋습니다.

오늘은 react 에서 경고창을 쉽게 띄우는 방법을 알아보도록 하겠습니다.

주의 ! react 의 버전이 16.8.0 이상이여야 합니다.

구현

원래 onbeforeunload 이벤트에 함수를 추가하여 구현을 하지만, react-beforeunload 를 이용하여 간편하게 적용하도록 하겠습니다.

설치

우선 react-beforeunload 를 설치 합니다.

npm install react-beforeunload

또는 yarn

yarn add react-beforeunload

사용 방법

사용방법은 간단합니다.

import { useBeforeunload } from "react-beforeunload";

const Example = () => {
  useBeforeunload((event) => event.preventDefault());

  return (
    ...
  )
}

export default Example;

useBeforeunload 를 import 하여 위와 같이 작성하면 됩니다.

패키지 보러 가기

안내사항

사이트에 꼭 변경사항이 있어야 작동합니다.

마치며

오늘은 간단하게 react 환경에서 변경사항이 있을 시 새로고침 할 때 경고창을 띄워주는 방법을 알아보았습니다.

추가적인 궁금한 사항은 댓글로 남겨주세요 😀