[React] React Hook-2.3 useConfirm과 usePreventLeave

* useConfirm과 usePreventLeave는 useState, useEffect를 사용하지 않기 때문에

hook은 아니지만 함수형 프로그래밍을 익히는데 도움이 된다.

 

 

< useConfirm >

 

- 사용자가 무언가를 하기전에 확인하는 것으로
- 사용자가 버튼을 click하면 event 실행 전 msg를 보여준다.

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";

const useConfirm = (message = "", onConfirm, onCancel) => {
  if (onConfirm && typeof onConfirm !== "function") return;
  const confirmAction = () => {
    if (confirm(message)) onConfirm();
    else onCancel();
  };
  return confirmAction;
};
export default function App() {
  const deleteMsg = () => console.log("Delete button has clicked");
  const abortMsg = () => console.log("Aborted");
  const confirmDelete = useConfirm("Are you sure?", deleteMsg, abortMsg);
  return (
    <div className="App">
      <button onClick={confirmDelete}>Delete</button>
    </div>
  );
}

 

< delete button click 후 화면 >

< 취소 선택 후 console창 >

< 확인 선택 후 console창 >

 

 

< usePreventLeave >

import React, { useEffect, useState, useRef } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

const usePreventLeave = () => {
  const listener = (event) => {
    event.preventDefault();
    event.returnValue = "";
  };
  const enablePrevent = () => window.addEventListener("beforeunload", listener);
  const disablePrevent = () =>
    window.removeEventListener("beforeunload", listener);
  return { enablePrevent, disablePrevent };
};
export default function App() {
  const { enablePrevent, disablePrevent } = usePreventLeave();
  return (
    <div className="App">
      <button onClick={enablePrevent}>Protect</button>
      <button onClick={disablePrevent}>Unprotect</button>
    </div>
  );
}

 

beforeunload : window가 닫히기 전에 function이 실행되는 것을 허락한다.

 

 

< protect 선택 후 창 닫기를 시도했을 때 >