React 새로고침 선택적 막기 react-beforeunload

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

본론으로 넘어가기 전 완벽한 내용이 아님으로 다른 자료를 더 찾아보고 활용해 보시는 걸 추천드립니다. (혹시나 보시는 분이 있을까바.... )

노션 등의 페이지를 나갈 때 변경된 사항이 저장되지 않는다는 확인 문구가 뜨는 것을 본적이 있을 것이다.
그것과 비슷하게 나도 글을 쓰는 도중에 새로고침을 하면 변경 될 수 있다는 안내 문구를 띄우고 싶었고, 그 방법으로 react-beforeunload를 찾았다.

사용 방법

사실 이 새로고침을 막을 수 있는 방법은 다양할 것 같다. onbeforeunload라는 이벤트도 존재하고 키보드 이벤트로도 막을 수 있을 것 같은데, 앞서 언급한 라이브러리를 이용하면 쉽게 구현할 수 있다.

라이브러리 설치

npm install react-beforeunload
yarn add react-beforeunload

코드

import  { useBeforeunload }  from  "react-beforeunload"
...
useBeforeunload((event)  => event.preventDefault())
...

상단에 import 한 후 해당 코드를 입력하면 끝이다.

이렇게 작성하면 경고창이 뜨고 선택에 따라 새로고침을 막을 수 있다 .

 

 

 

주의사항

• react 버전이 16.8.0 이상 버전에서 사용이 가능하다.
• 변경사항이 있어야 동작한다.

변경사항이 있다는 의미를 예로 들었을 때, 서버로부터 데이터를 get해서 다시 렌더링 하는 경우도 변경사항이며,
textarea 등 작성도 변경사항이 될 수 있다. 단, onChange로 관리를 해주어야 한다.
ref로 클릭 시 저장되는 로직에 경우 누르기 전까지 변동사항이 없기 때문에, onChange로 input 태그 등을 관리 해야 한다.