[유용한 기능]useConfirm, usePreventLeave 내가 해냄

인트로

react custom hook 관련 강의를 듣다가 훅을 사용하여 만들지는 않았지만 되게 유용하다라는 생각이 드는 함수들이있어 정리해보려고 합니다.

어떻게 구현하는지 궁금해하던 기능들이었는데 강의에서 만나게 되니 매우 반갑네요

---

useConfirm

사용자가 뭔가를 하기 전에 확인하는 함수입니다.

예를 들어 뭔가를 삭제할 때 정말 삭제하시겠습니까?라는 창이 뜨는 경우가 있잖아요. 그런 기능입니다.

 

버튼 클릭 시 comfirmDelete 함수가 호출됩니다.

      <button onClick={confirmDelete}>Delete the world</button>

ComfirmDelete 변수에는 useConfirm이 반환하는 함수가 저장됩니다.

  const deleteWorld = () => console.log("Deleting the world");
  const abort = () => console.log("Aborted");
  const confirmDelete = useConfirm("Are you sure", deleteWorld, abort);

useConfirm

첫 번째 인자는 브라우저 모달창에 보여줄 메시지입니다. 기본 값은 빈 문자열입니다. 

두 번째 인자가 모달창의 '확인' 버튼을 클릭했을 경우 세 번째 인자가 '취소' 버튼을 클릭했을 경우 실행되는 함수입니다.

콜백 함수의 값이 falsy이거나 함수가 아닐 경우 함수를 바로 종료합니다.

반환값으로 confirmAction 함수를 반환합니다.

confirmAction 함수는 브라우저 모달창에서 사용자가 확인을 클릭했을 경우 onConfirm 함수를,

취소를 클릭했을 경우 onCancel 함수를 실행합니다.

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

      <button onClick={confirmDelete}>Delete the world</button>

동작을 확인해보겠습니다.

 

usePreventLeave

사용자가 창을 닫는 것을 막는 함수입니다.

 

enablePrevent와 disablePrevent에는 usePreventLeave 함수가 반환하는 객체에 담긴 함수가 저장됩니다.

  const { enablePrevent, disablePrevent } = usePreventLeave();

usePreventLeave

listener

event.preventDefault()는 이벤트의 기본 동작을 취소하는 메서드입니다.

<a> 태그의 경우 클릭 이벤트 발생 시 해당 링크의 url 주소로 이동하는 것이 이벤트 기본 동작입니다. 이러한 것을 막을 수 있습니다.

event.returnValue = ''; 'beforeunload'이벤트를 위해서 크롬에서는 returnValue 설정이 필요하다고 합니다.

enablePrevent 

이벤트를 추가합니다. 이벤트 타입은 'beforeunload'이며 이벤트 콜백 함수는 listener입니다.

'beforeunload'는 사용자가 페이지를 떠날 때 정말로 떠날 것인지 묻는 확인 대화 상자를 표시합니다. 

확인을 누를 경우 현재 페이지가 닫히고 취소할 경우 현재 페이지에 머무릅니다.

window가 닫히기 전에 function이 실행되는 걸 허락합니다. 즉 창이 닫히기 전에 listener가 실행됩니다.

확인 대화 상자를 표시하기 위해서는 preventDefault()를 호출해야 합니다.

disablePrevent

추가한 이벤트를 제거해 줍니다.

const usePreventLeave = () => {
  const listener = (event) => {
    event.preventDefault();
    event.returnValue = ""; //크롬에서 이거 안넣으면 동작안함
  };
  const enablePrevent = () => {
    window.addEventListener("beforeunload", listener);
  };
  const disablePrevent = () => {
    window.removeEventListener("beforeunload", listener);
  };
  return { enablePrevent, disablePrevent };
};

버튼 클릭 시 enablePrevent, disablePrevent 함수가 실행됩니다.

      <button onClick={enablePrevent}>Protect</button>
      <button onClick={disablePrevent}>Unprotect</button>

동작을 확인해 봅시다! 잘 동작하네요

---

처음 보는 이벤트도 배울 수 있고 유용한 기능도 생각보다 간단하게(?) 구현해 볼 수 있었습니다.

정말 맘에 드는 강의네요..

 

노마드코더 실전형 리액트 훅 강의 내용을 참고하였습니다.