[노마드코더]실전형 리액트 Hooks 10개 - (useConfirm, usePreventLeave, useBeforeLeave)

useConfirm

useConfirm은 사용자가 버튼을 클릭하는 등.. 무언가 작업을 하면 이벤트를 실행하기 전에 메시지를 보여주는 것이다. 예제 코드는 다음과 같다.

// App.js

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

const App = () => {
  // 확인 버튼 눌렀을 때
  const deleteWorld = () => console.log("Deleting the world...");
  // 취소버튼 눌렀을 때
  const abort = () => console.log("Aborted");

  const confirmDelete = useConfirm("Are u sure?", deleteWorld, abort);

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

export default App;

• 예제 코드를 실행하게 되면 다음과 같이 메시지 창이 뜨게 된다.

• 다음과 같이 확인 버튼을 눌렀을 때는 deleteWorld 함수가 실행되고, 취소 버튼을 눌렀을 때는 absort 함수가 실행된다.

---

usePreventLeave

usePreventLeave는 사용자가 window 창을 닫을 때, 닫기 이벤트를 적용시키기 전에 "저장되지 않았는데 괜찮아?"라는 메시지를 보여주는 것이다. 

// App.js

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 버튼을 클릭하고 window 창을 닫으면, 다음과 같이 변경한 내용이 저장되지 않을 수 있다는 멘트를 메시지로 보여주고, 사용자가 나가기 버튼을 클릭시 window 창을 닫는 이벤트를 적용시킨다.
• 반대로 Unprotect 버튼을 클릭하고 window 창을 닫으려 하면, 바로 닫히게 된다.

---

useBeforeLeave

useBeforeLeave는 사용자가 화면에서 마우스가 벗어나면 function을 실행시켜 팝업같은 것을 실행시키고 싶을 때, 사용한다. 다음은 useBeforeLeave를 활용한 간단한 예제이다.

// App.js

import { useEffect } from "react";

const useBeforeLeave = (onBefore) => {
  if (typeof onBefore !== "function"){
    return;
  }

  const handle = () => {
    onBefore();
  };

  useEffect (() => {
    document.addEventListener("mouseleave",handle);
    return () => document.removeEventListener("mouseleave",handle);
  },[]);
};

const App = () => {
 
  const begForLife = () => console.log("plz don't leave");
  useBeforeLeave(begForLife)
  return (
    <div className="APP">
      <h1>useBeforeLeave Example</h1>
    </div>
  );
};

export default App;

• 실행을 시켜보면 다음과 같이 화면 밖에 마우스가 이동되면 begForLife 함수가 실행되는 것을 확인할 수 있다.

• 또한, 응용하면 다음과 같이 event를 console로 찍어 볼 수 있는데, 만약 사용자의 마우스 커서가 위를 향하면 즉, clinetY가 0보다 작거나 같으면 무언가 처리를 하고 싶을때 다음 예제와 같이 수정하면 된다.

// App.js

import { useEffect } from "react";

const useBeforeLeave = (onBefore) => {
  if (typeof onBefore !== "function") {
    return;
  }


const handle = (event) => {
	// 수정된 부분
    const { clientY } = event;
    if (clientY <= 0) {
      onBefore();
}
  };

  useEffect(() => {
    document.addEventListener("mouseleave", handle);
    return () => document.removeEventListener("mouseleave", handle);
  }, []);
};

const App = () => {
  const begForLife = () => console.log("plz don't leave");
  useBeforeLeave(begForLife);
  return (
    <div className="APP">
      <h1>useBeforeLeave Example</h1>
    </div>
  );
};

export default App;

• 다음과 같이 마우스 커서가 위를 향할 때, 함수가 잘 실행되는 것을 확인할 수 있다.

 

Reference

https://nomadcoders.co/react-hooks-introduction/lobby

실전형 리액트 Hooks 10개 – 노마드 코더 Nomad Coders