# useAxios의 기능기능은 fetch와 유사하고 간단하게 사용할땐 fetch를,확장성을 염두해봤을 땐 axios를 쓰는게 좋다.fetch와 다르게 인스턴스를 사용할 수 있는 장점도 있다.(두번째인자에 넣지 않을경우 기본값으로 설정된다.) import defaultAxios from "axios";//터미널에 npm i axios 하여 인스톨한 후 임포트해준다.import { useEffect, useState } from "react";const useAxios = (opts, axiosInstance = defaultAxios) => { //opts 는 api를 등록할 수 있다. fetch와 다르게 바로 json화 되는게 axios의 장점이다. //두번째 인자 axiosInstance는..

# useNotification의 기능 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 { ..

# useFadeIn의 기능 import {useEffect, useRef} from "react";export const useFadeIn = (duration = 1, delay = 0) => { if (typeof duration !== "number" || typeof delay !== "number") { return; } const element = useRef(); useEffect(() => { if (element.current) { const { current } = element; current.style.transition = `opacity ${duration}s ease-in-out ${dela..

# useScroll의 기능 import {useEffect, useState} from "react";export const useScroll = () => { const [state, setState] = useState({ x: 0, y: 0 }); const onScroll = () => { setState({ y: window.scrollY, x: window.screenX }); }; useEffect(() => { window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); ..

# useNetwork의 기능 import {useEffect, useState} from "react";export const useNetwork = (onChange) => { const [status, setStatus] = useState(navigator.onLine); const handleChange = () => { if (typeof onChange === "function") { onChange(navigator.onLine); } setStatus(navigator.onLine); }; useEffect(() => { window.addEventListener("online", handleCha..