Custom Hooks 만들기 (2/3)

💡 3. useClick

import { useRef, useEffect } from "react";

/**
 * 
 * @param {function} onClick : ref로 참조한 요소에게 클릭했을 시 실행시킬 함수를 정의합니다.
 * @returns {ref} 참조할 대상을 지정합니다.
 */

const useClick = (onClick) => {
  const ref = useRef();

  useEffect(() => {
    const element = ref.current;
    if (typeof onClick !== "function") {
      return;
    }

    if (element) {
      element.addEventListener("click", onClick);
    }
    return () => {
      if (element) {
        element.removeEventListener("click", onClick);
      }
    };
  }, [onClick]);
  return ref;
};

export default useClick;

💡 4. useConfirm

/**
 *
 * @param {string} message : confirm messege 를 선업합니다.
 * @param {funtion} onConfirm : confirm 이 true 일 경우 실행할 함수를 할당합니다.
 * @param {funtion} onReject : confirm 이 false 일 경우 실행할 함수를 할당합니다.
 * @returns
 */

const useConfirm = (message = "", onConfirm, onReject) => {
  if (!onConfirm && typeof callback !== "function") {
    return;
  }
  if (!onReject && typeof onReject !== "function") {
    return;
  }
  const confirmAction = () => {
    if (window.confirm(message)) {
      onConfirm();
    } else {
      onReject();
    }
  };
  return confirmAction;
};

export default useConfirm;

💡 5. useBeforeLeave

import { useEffect } from "react";

/**
 *
 * @param {function} onBefore : event가 감지되었을 때 실행할 함수를 할당합니다.
 * @param {string} event : 감지할 event를 할당합니다. 기본값은 "mouseleave" 입니다.
 */

const useBeforeLeave = (onBefore, event = "mouseleave") => {
  const handle = () => {
    onBefore();
  };
  useEffect(() => {
    if (typeof event !== "string") {
      return;
    }
    if (typeof onBefore !== "function") {
      return;
    }
    document.addEventListener(event, handle);
    return () => document.removeEventListener(event, handle);
  });
};

export default useBeforeLeave;

💡 6. useEventRef

import { useRef, useEffect } from "react";

/**
 *
 * @param {function} onClick : ref로 참조한 요소에게 클릭했을 시 실행시킬 함수를 정의합니다.
 * @returns {ref} 참조할 대상을 지정합니다.
 */

const useEventRef = (fucntion, event) => {
  const ref = useRef();

  useEffect(() => {
    const element = ref.current;
    if (typeof fucntion !== "function") {
      return;
    }

    if (element) {
      element.addEventListener(event, fucntion);
    }
    return () => {
      if (element) {
        element.removeEventListener(event, fucntion);
      }
    };
  }, [fucntion, event]);
  return ref;
};

export default useEventRef;

💡 7. useScroll

import { useState, useEffect } from "react";

/**
 * 
 * @returns {object} state : window를 기준으로 scroll X, Y를 계산하여 보여주는 객체를 리턴합니다.
 */

const useScroll = () => {
  const [state, setState] = useState({
    x: 0,
    y: 0,
  });

  const onScroll = () => {
    setState({ x: window.scrollX, y: window.scrollY });
  };
  useEffect(() => {
    window.addEventListener("scroll", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
    };
  }, []);
  return state;
};

export default useScroll;

💡 8. useConfirm

/**
 *
 * @param {string} message : confirm messege 를 선업합니다.
 * @param {funtion} onConfirm : confirm 이 true 일 경우 실행할 함수를 할당합니다.
 * @param {funtion} onReject : confirm 이 false 일 경우 실행할 함수를 할당합니다.
 * @returns
 */

const useConfirm = (message = "", onConfirm, onReject) => {
  if (!onConfirm && typeof callback !== "function") {
    return;
  }
  if (!onReject && typeof onReject !== "function") {
    return;
  }
  const confirmAction = () => {
    if (window.confirm(message)) {
      onConfirm();
    } else {
      onReject();
    }
  };
  return confirmAction;
};

export default useConfirm;