[React] useConfirm

useConfirm으로 사용자에게 확인 받는 기능 구현

form data를 입력받으면서 데이터를 저장 또는 삭제하도록 하기 위해 useConfirm을 사용하였다.
기본 틀은 아래와 같다.

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

onConfirm이 존재하지 않거나 onConfirm이 함수가 아닐 경우 return이 실행된다.
사용자가 '확인'을 눌렀을 경우 if문, '취소'를 눌렀을 경우 else문이 동작한다.

  const deleteWord = () => console.log("delete");
  const abortWord = () => console.log("Aborted");
  const confirmDelete = useConfirm(
    "저장하지 않은 변경사항이 있습니다. 정말로 닫으시겠습니까?",
    deleteWord,
    abortWord
  );

//생략

<S.BackBtn
            onClick={() => {
              setIsActive(!isActive);
              confirmDelete();
            }}
            isActive={isActive}
          >

지정을 원하는 버튼 태그에 onClick 속성으로 confirmDelete를 넣어주었다.

구현 결과