// useNetwork.js const useNetwork = (onChange) => { const [status, setStatus] = useState(navigator.onLine); const handleChange = () => { onChange(navigator.onLine); setStatus(navigator.onLine); }; useEffect(() => { window.addEventListener("online", handleChange); window.addEventListener("offline", handleChange); return () => { window.removeEventListener("online", handleChange); window.removeEven..

텍스트가 딜레이를 가지고 fadeIn방식으로 표시되는 코드입니다. 스타일을 useFadeIn.js에서 적용해주었습니다. // useFadeIn.js import { useRef, useEffect } from "react"; const useFadeIn = (duration = 1, delay = 0) => { const element = useRef(); useEffect(() => { if (element.current) { const { current } = element; current.style.transition = `opacity ${duration}s ease-in-out ${delay}s`; current.style.opacity = 1; } }, []); return { ref: ele..

mouseleave란 마우스가 페이지 밖으로 빠져나갈 때 발생하는 이벤트입니다. // useBeforeLeave import { useEffect } from "react"; const useBeforeLeave = (onBefore) => { const handle = (event) => { const { clientY } = event; if (clientY { document.addEventListener("mouseleave", handle); return () => { document.removeEventListener("mouseleave", handle); }; }, []); }; export default useBeforeLeave; // index.js import React from "..

// usePreventLeave.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 }; }; export default usePreventLeave; // index.js import React..

// useConfirm.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; }; export default useConfirm; // index.js import React from "react"; import ..

// useClick.js import { useEffect, useRef } from "react"; const useClick = (onClick) => { const ref = useRef(); console.log(ref); useEffect(() => { const element = ref.current; if (element) { element.addEventListener("click", onClick); } return () => { if (element) { element.removeEventListener("click", onClick); } }; }, [onClick]); return ref; }; export default useClick; // index.js import Reac..

useRef는 자바스크립에서 getElementById()를 하는것과 같은 기능입니다. 아래 예제에서는 input에 2초후에 focus가 가도록 하는 코드입니다. 사용할 태그내에서 ref={ }를 사용해서 useRef()를 통해 받은 값을 넣습니다. 그리고 그 값을 이용해서 해당 태그에 접근할 수 있습니다. import React, {useRef} from "react"; const App = () => { const input = useRef(); setTimeout(() => input.current.focus(), 2000); return ( ) const rootElement = document.getElementById("root"); ReactDOM.render(, rootElement);

// useTitle.js import { useState, useEffect } from "react"; const useTitle = (initialTitle) => { const [title, setTitle] = useState(initialTitle);// 입력받은 파라미터로 초기값 설정 const updateTitle = () => {// title 변경 함수 const htmlTitle = document.querySelector("title"); // 태그 찾기 htmlTitle.innerText = title;// 태그에 변수 title값을 넣음 }; useEffect(updateTitle, [title]);// title 값이 바뀔 때마다 title 변경 함수 실행 return setT..