[React] React Hooks (11) - useConfirm, usePreventLeave

useConfirm, usePreventLeave

useConfirm, usePreventLeave를 간단하게 hooks로 만들어보자

 

useConfirm 예시 1

버튼 클릭 시 Are you sure 라는 confirm 창이 나오고 확인을 누르면 Delete the world 출력

취소를 누르면 Aborted 출력되는 간단한 함수형 프로그래밍

const useConfirm = (message = "", onConfirm, onCancel) => {
  if (!onConfirm && typeof onConfirm !== "function") {
    return;
  }
  if (onCancel && typeof onCancel !== "function") {
    return;
  }
  const confirmAction = () => {
    if (confirm(message)) {
      onConfirm();
    } else {
      onCancel();
    }
  };
  return confirmAction;
};

const App = () => {
  const deleteWorld = () => console.log("Delete the world");
  const abort = () => console.log("Aborted");
  const confirmDelete = useConfirm("Are you sure", deleteWorld, abort);

  return (
    <div className="App">
      <button onClick={confirmDelete}>Delete the world</button>
    </div>
  );
};

 

 

---

usePreventLeave예시 2

Protect 버튼 클릭 시 웹 페이지를 나가려 할때 아래와 같은 메시지를 활성화 시켜줌

Unprotect 클릭 시 아래의 메시지 없음

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 className="App">
      <button onClick={enablePrevent}>Protect</button>
      <button onClick={disablePrevent}>Unprotect</button>
    </div>
  );
};