[React-Hooks] React Hooks - usePreventLeave

* usePreventLeave

• 어떤 문서작업이나 작업을 할시 sava되지 않았을때 브라우저를 닫으려 할때 되물어 주는 confirm(선택창)을 띄우는 hook입니다. 

---

* usePreventLeave 예시 코드

const usePreventLeave = () => {
  const listener = (event) => {
    event.preventDefault();
    event.returnValue = "";
  };
  const enablePrevent = () => {
    window.addEventListener("beforeunload", listener);
  };
  const disablePrevent = () => {
    window.removeEventListener("beforeunload", listener);
  };
  return { enablePrevent, disablePrevent };
};

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

export default App;

•  event.preventDefault()는 이벤트를 중지시키는 코드이다. 하지만 일부 브라우저에서는 호환이 되지 않기 떄문에
• event.returnValue를 같이 사용해주고 있다.