React/Hook

[ Hook ] useScroll

🔴 Introduction ⚪ 현재 스크롤의 y 좌표 값을 구해서 리턴해주는 Hook 🟠 Hook import { useState, useEffect } from "react"; export const useScroll = () => { const [state, setState] = useState({ x: 0, y: 0, }); const onScroll = () => { setState({ y: window.scrollY, x: window.scrollX }); }; useEffect(() => { window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); ..

[ Hook ] usePreventLeave

🔴 Introduction ⚪ 현재 페이지를 종료하려고 할 때, 경고 메시지를 띄울지 말지를 결정하는 함수를 리턴해주는 Hook 🟠 Hook export const usePreventLeave = () => { const listener = (event) => { event.preventDefault(); event.returnValue = ""; }; const enablePrevent = () => window.addEventListener("beforeunload", listener); const disablePrevent = () => window.removeEventListener("beforeunload", listener); return [enablePrevent, disablePrevent..

[ Hook ] useNotification

🔴 Introduction ⚪ Window Notification에 대한 옵션을 설정하면 권한 허용 여부 이후 Notification을 띄워주는 Hook 🟠 Hook export const useNotification = (title, options) => { if (!("Notification" in window)) { return; } const fireNotif = () => { if (Notification.permission !== "granted") { Notification.requestPermission().then((permission) => { if (permission === "granted") { new Notification(title, options); } else { retur..

[ Hook ] useHover

🔴 Introduction ⚪ 컴포넌트에 Hover 이벤트 발생시 전달한 함수를 실행시켜주는 Hook 🟠 Hook import { useEffect, useRef } from "react"; export const useHover = (onHover) => { const element = useRef(); useEffect(() => { if (typeof onHover !== "function") { return; } if (element.current) { element.current.addEventListener("mouseenter", onHover); } return () => { if (element.current) { element.current.removeEventListener("mous..

[ Hook ] useConfirm

🔴 Introduction ⚪ 메시지와 확인할 시 함수, 취소할 시 함수를 인자로 넣어 보내면 이에 해당하는 Confirm 모달 창을 띄워주는 hook 🟠 Hook export 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 confirmAc..

[ Hook ] useBeforeLeave

🔴 Introduction ⚪ 마우스가 브라우저 창의 바깥으로 벗어났을 때, 파라미터로 받은 onLeave 함수를 실행시키는 hook 🟠 Hook import { useEffect } from "react"; export const useBeforeLeave = (onLeave) => { const handle = (event) => { const { clientY } = event; if (clientY { if (typeof onLeave !== "function") { return; } else { document.addEventListener("mouseleave", handle); } return () => document.removeEventListener("mouseleave", handle..