#5. useConfirm & usePreventLeave hook

useConfirm

---

사용자가 무언가를 하기 전에 확인시켜 주는 기능

ex) 사용자가 버튼 클릭 작업을 하면 이벤트를 실행하기 전에 확인하는 메시지를 보여주는 기능 

const useConfirm = (message, callback) => {}

 

 

import React, { useEffect, useState, useRef } from "react";

const useConfirm = (message = '', onConfirm, onCancel) => {
  if (!onConfirm || typeof onConfirm !== 'function') {
    return;
  }
  if (onCancel && typeof onCancel !== 'function') {
    return;
  }
  const confirmAction = () => {
    if (confirm(message)) {
      callback();
    } else {
      rejection();
    }
  };
  return confirmAction;
};

const App = () => {
  const deleteWorld = () => console.log("Deleting the world");
  const abort = () => console.log("Aborted");
  const confirmDelete = useConfirm("Are you sure", deleteWorld, abort);
  return (
    <div className="App">
      <button onClick={confirmDelete}>Delete the world</button>
    </div>
  );
};

export default App;

 

 

버튼 클릭 시 작동 원리

1. 버튼 클릭
2. onClick 함수 실행 -> confirmDelete 콜 
3. confirmDelete =  "Are you sure" 메시지와 deleteWorld, abort 함수를 파라미터로 하는 useConfirm 함수
   
   • deleteWorld 함수는 confirm 메시지가 떴을 때 확인을 누르면 콘솔에 "Deleting the world"를 출력하는 기능을 하는 함수이다.
   • abort 함수는 confirm 메시지가 떴을 때 취소을 누르면 콘솔에 "Aborted"를 출력하는 기능을 하는 함수이다. 
4. confirm()은 자바스크립트 함수로, 파라미터 안에 message 값을 넣으면 알림 창을 띄워준다. 
   • 이 때 확인을 누르면 true를 반환, 취소를 누르면 false를 반환한다.
5. useConfirm은 위와같은 기능을 하는 confirmAction 함수를 리턴하므로 궁극적으로 onClick을 하면 실행되는 함수는 confirmAction이다.

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

• onConfirm 함수가 존재하지 않거나 존재하더라도 function 타입이 아니면 종료한다.
• onCancel 함수는 필수가 아니므로 존재하지 않아도 되지만, 만약 존재하는데 function 타입이 아니라면 종료한다.

---

usePreventLeave

---

보통 웹 사이트에서 볼 수 있는 window 창을 닫을 때 "아직 저장하지 않았어" 라고 말하는 기능

import React, { useEffect, useState, useRef } from "react";

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 App = () => {
  const { enablePrevent, disablePrevent } = usePreventLeave();
  return (
    <div className="App">
      <button onClick={enablePrevent}>Protect</button>
      <button onClick={disablePrevent}>Unprotect</button>
    </div>
  );
};

export default App;

작동 원리

• protect 버튼을 클릭하면 enablePrevent를 실행, Unprotect 버튼을 클릭하면 disablePrevent를 실행한다.
• enablePrevent는 window에 addEventListener("beforeunload", listener); 라는 이벤트리스너를 바인딩한다.
  • beforeunload 이벤트는 window가 unload (닫히기 전)에 시작된다.
  • listener는 beforeunload 이벤트가 발생했을 때, 즉 사용자가 페이지를 벗어나기 전에 실행될 함수를 가리킨다.
  • event.preventDefault() : 이벤트의 기본동작을 취소한다. 여기서는 페이지를 벗어나는 동작을 취소하고 사용자에게 경고를 표시하거나 추가 작업을 수행할 기회를 준다.
  • event.returnValue = ""; : 이벤트의 returnValue 속성을 설정한다. 이 속성은 사용자가 페이지를 떠날 때 표시되는 기본 메시지이다. 빈 문자열을 설정함으로써 사용자에게 아무런 메시지도 표시되지 않도록 한다. 이를 통해 기본적으로 제공하는 페이지 떠나기 경고 대신 사용자 정의 경고 메시지를 표시할 수 있다.
• disablePrevent는 window에 removeEventListener("beforeunload", listener); 라는 이벤트리스너를 바인딩한다.
  • removeEventListener는 바인딩 되어있던 이벤트리스너를 제거하는 기능을 한다.
  • removeEventListener의 경우 add 했을 때 입력했던 인자와 완전히 동일해야만 이벤트 핸들러를 제거할 수 있다.
• protect를 클릭하면 이벤트리스너가 바인딩 되어 페이지를 닫을 때 "사이트를 나가시겠습니까" 알림창을 띄워주고 unprotect를 클릭하면 바인딩 된 이벤트리스너가 제거되어 페이지를 닫을 때 아무런 알림창을 띄워주지 않는다.