[React Hooks - 6] useConfirm 만들기

오늘은 useConfirm 기능을 만들어 봅니다. 이 기능은 hooks 기능을 사용하지는 않지만, 함수형 프로그래밍 이해에 도움이 되는 부분입니다.

꽤나 단순하게 개발이 가능합니다. 그래도 계속 해보면서 react 함수형 프로그래밍에 적응을 해봅니다.!

---

useConfirm

• 웹에서 버튼 클릭시 경고창으로 확인/취소를 선택할 수 있는 기능을 버튼에 쉽게 삽입할 수 있습니다.
• 메세지는 받을 수도 있고 직업입력할 수 있으며, confirm시 함수, cancel시 함수를 parameter로 넘겨줍니다.
• 기본적으로 함수를 파라미터로 받는 경우 typeof 기능으로 함수여부를 확인하는 기능을 넣어 줍니다.

전체 소스

const useConfirm = (onConfirm, onCancel, message = "Are you sure?") => {
  if (!onConfirm && typeof onConfirm !== "function") {
    return;
  }

  if (!onCancel && typeof onCancel !== "function") {
    return;
  }

  const confirmAction = () => {
    if (confirm(message)) {
      onConfirm();
    } else {
      onCancel();
    }
  };

  return confirmAction;
};

const UseConfirm = () => {
  const deleteWorld = () => {
    console.log("Deleting the world");
  };
  const abort = () => console.log("Aborted");
  const confirmDelete = useConfirm(deleteWorld, abort);

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

---

오늘은 좀 간단한 함수네요..!!! 여기까지..!!