코드
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 = '' 이거는 크롬에서는 암튼 써줘야한다고 한다....