[hooks] useConfirm & usePreventLeave

HYl·2022년 4월 27일
0

React Hooks

목록 보기
4/4

useConfirm

const useConfirm = (message = "", onConfirm, onCancel) => {
  if (!onConfirm || typeof onConfirm !== "function") {
    return;
  }
  if (onCancel && typeof onCancel !== "function") {
    return;
  }
  
  const confirmAction = () => {
    if(window.confirm(message)) {
      onConfirm();
    } else {
      onCancel();
    }
  }
  
  return confirmAction;
};
  • onConfirm 은 필수적인 사항이고, onCancel 은 필수적인 사항이 아닌 조건이므로 조건문을 추가하여 오류 방지.
const Home = () => {
  const delete = () => console.log("Deleting...");
  const abort = () => console.log("Aborted");
  const confirmDelete = useConfirm("Are you sure", delete, abort);
  return (
    <div>
      <button onClick={confirmDelete}>Delete</button>
    </div>
  )
}

export default Home

usePreventLeave

  • beforeunload는 window가 닫히기 전에 function이 실행되는 것을 허락한다.
const usePreventLeave = () => {
  const listener = event => {
    event.preventDefault(); // 표준에 따라 기본 동작 방지
    event.returnValue = ""; // Chrome에서는 returnValue 설정이 필요함
  };
  const enablePrevent = () => window.addEventListener("beforeunload", listener)
  const disablePrevent = () =>
  	window.removeEventListener("beforeunload", listener);
  
  return { enablePrevent, disablePrevent };
};
const Home = () => {
  const { enablePrevent, disablePrevent } = usePreventLeave();
  return (
    <div>
      <button onClick={enablePrevent}>Protect</button>
      <button onClick={disablePrevent}>UnProtect</button>
    </div>
  )
}

export default Home
profile
꾸준히 새로운 것을 알아가는 것을 좋아합니다.

0개의 댓글