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 = "";
};
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