Hook - userPreventLeave

import React, { useEffect, useRef, useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const userPreventLeave = () => {
  const Listener = (event) => {
    event.preventDefault();
    //event.returnValue 를 써주어야 함. 
    event.returnValue = "";
  };
//beforeunload 윈도우를 종료시키때 발생하는 함수
  const enablePrevent = () => window.addEventListener("beforeunload", Listener);
  const disenablePrevent = () =>
    window.removeEventListener("beforeunload", Listener);

  return { enablePrevent, disenablePrevent };
};
const App = () => {
  const { enablePrevent, disenablePrevent } = userPreventLeave();
  return (
    <div className="App">
      <button onClick={enablePrevent}>Protect</button>
      <button onClick={disenablePrevent}>Unprotect</button>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);