프로젝트의 구조는 다음과 같다.

/note
  /jsx
      note.jsx
      script.jsx
  /js
      note.jsx
      react.js
      react-dom.js
      script.js
  index.html

 

window.onbeforeunload는 브라우저에서 기본적으로 제공하는 이벤트로 간단하게 사용할 수 있다(크로스 브라우징 지원을 위해 코드를 추가로 작성했다).⁵

window.addEventListener('beforeunload',function (e) {
  let confirmationMessage = '정말 닫으시겠습니까?'
  e.returnValue = confirmationMessage    // Gecko, Trident, Chrome 34+
  return confirmationMessage             // Gecko, WebKit, Chrome < 34
})

 

다음과 같이 작성할 수도 있다.

window.onbeforeunload = function () {
  ...
  return confirmationMessage
}