[React] 'beforeunload' 이용하여 페이지 이동 전에 confirm 받기

쿼카쿼카·2022년 8월 15일
0

React / Next

목록 보기
22/34

코드

import React from 'react'

function usePreventLeave() {
  function listener(e) {
    e.preventDefault();
    e.returnValue = '';
  }

  function enablePrevent() {
    window.addEventListener('beforeunload', listener)
  }

  function disablePrevent() {
    window.removeEventListener('beforeunload', listener)
  }

  return {enablePrevent, disablePrevent}
}

export default function App() {
  const {enablePrevent, disablePrevent} = usePreventLeave();
  return (
    <div>
      <button onClick={enablePrevent}>Protect</button>
      <button onClick={disablePrevent}>Unprotect</button>
    </div>
  )
}

배운점

  • 리액트에서 addEventListener를 쓰면 적폐인 줄 알았는데 사실 개꿀이다.
  • e.returnValue = '' 이거는 크롬에서는 암튼 써줘야한다고 한다....
profile
쿼카에요

0개의 댓글