[TIL] Custom Hooks - 2

https://velog.io/@devpark_0x1c/TID-Custom-hook-1

지난번 custom hooks 1번에 이어 올리는 글이다.

useClick

import { useEffect, useRef } from "react";

const useClick = (onClick) => {
  // 매개변수 onClick이 함수가 아닐 경우 Early Return
  if (typeof onClick !== "function") {
    return;
  }

  const element = useRef();

  // ref로 설정된 element에 click 이벤트 설정
  useEffect(() => {
    if (element.current) {
      element.current.addEventListener("click", onClick);
    }
    return () => {
      element.current.removeEventLister("click", onClick);
    };
  }, []);

  return element;
};

const App = () => {
  const handleClick = () => console.log("clicked");
  // handleClick을 커스텀 훅 useClick에 매개변수로 넣어준다
  const h1Click = useClick(handleClick);

  return (
    <div className="App">
      // useClick을 통해 설정된 이벤트로 인하여 h1 태그를 클릭하면 "clicked"가 콘솔에 나타난다.
      <h1 ref={h1Click}>Hi</h1>
    </div>
  );
};

export default App;

useConfirm

window 객체가 가지고 있는 confirm을 활용한 hooks

https://developer.mozilla.org/ko/docs/Web/API/Window/confirm

const useConfirm = (message, resolve, reject) => {
  // resolve가 없거나 resolve의 타입이 function이 아닐 경우 리턴
  if (!resolve || typeof resolve !== "function") {
    return;
  }
  // reject 없거나 reject의 타입이 function이 아닐 경우 리턴
  if (!reject || typeof reject !== "function") {
    return;
  }

  // confirm 버튼을 눌렀을 때 확인을 누르면 매개변수로 넘어온 resolve를 실행
  // 취소를 누르면 매개변수로 넘어온 reject를 실행한다.
  const confirmAction = () => {
    if (window.confirm(message)) {
      resolve();
    } else {
      reject();
    }
  };

  return confirmAction;
};

const App = () => {
  const resolve = () => console.log("Resolve");
  const reject = () => console.log("Reject");
  const confirmTest = useConfirm("Confirm?", resolve, reject);

  return <button onClick={confirmTest}>yes?</button>;
};

export default App;

usePreventLeave

브라우저에서 탭을 끄거나 새로고침을 할 때 다시 한번 물어보는 이벤트를 활용한 hooks

https://developer.mozilla.org/ko/docs/Web/API/Window/beforeunload_event

const usePreventLeave = () => {
  // beforeunload 문서에 따르면 대화상자를 표시하기 위해선 preventDefault를 선언해주어야 한다.
  // 크롬같은 경우는 이벤트의 returnValue 속성에 문자열 할당도 해주어야한다.
  const leave = (event) => {
    event.preventDefault();
    event.returnValue = "";
  };

  const addUnloadEvent = () => {
    window.addEventListener("beforeunload", leave);
  };

  const removeUnloadEvent = () => {
    window.removeEventListener("beforeunload", leave);
  };

  return { addUnloadEvent, removeUnloadEvent };
};

const App = () => {
  const { addUnloadEvent, removeUnloadEvent } = usePreventLeave();
  return (
    <div>
      // addLeaveEvent를 클릭하면 새로고침이나 닫기를 할 경우 물어보는 이벤트가 발생한다
      <button onClick={addUnloadEvent}>addLeaveEvent</button>
     // removeLeaveEvent 버튼은 위에서 실행되는 이벤트를 제거한다
      <button onClick={removeUnloadEvent}>removeLeaveEvent</button>
    </div>
  );
};

export default App;