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

1년 전·수정됨
React 새로고침 시 경고창 띄우기

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

들어가기 앞서

image

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;

useBeforeunloadimport 하여 위와 같이 작성하면 됩니다.

패키지 보러 가기

안내사항

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

마치며

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

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

댓글 4
권용빈
권용빈1년 전
좋은 글 보고갑니다 :)
차승호
차승호1년 전
항상 좋게 봐주셔서 감사합니다 !
권순관
권순관1년 전
우와 단순하게 처리가 가능하군요!
차승호
차승호1년 전
유용한 라이브러리가 되게 많아요 !