# 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는 인스턴스이고 아무것도 넣지않으면 기본값으로 적용

    const [state, setState] = useState({
        loading: true,
        error: null,
        data: null
    });
    //로딩, 에러, 데이터를 사용할 것이기 때문에 각각의 key와 value의 디폴트를 설정해준다.
    
    const [trigger, setTrigger] = useState(0);
    if (!opts.url) {  //유효성을 검사한다. 기본적으로 opts(API)는 url이기 때문
        return;
    }
    const refetch = () => {
        setState({
            ...state,
            loading: true
        });
        setTrigger(Date.now());
    };
    /* 리패치를 위한 함수이며 함수 실행시 setTrigger로 인해서 
    함수가 실행될 때마다 trigger는 계속해서 다른 값을 반환한다.
    이 후에 useEffect의 deps로 넣기 위한 트리거다.( 리패치 해야되니까 ) */


    useEffect(() => {
        axiosInstance(opts)       //fetch와 같은 기능을 해주고
            .then((data) => {     //로딩이되면(then) setState를 통해서 state값이 바뀐다.
                setState({
                    ...state,
                    loading: false,
                    data
                });
            })
            .catch((error) => {
                setState({ ...state, loading: false, error });
                //catch 는 에러를 캣치하며, reject상태일경우 내부 메소드를 실행한다.
                });
    }, [trigger]);
    //트리거가 deps에 들어가 있으니 trigger가 바뀌면 re-render한다.
    
    return { ...state, refetch };
    //반환값은 state의 모든 리터럴과 refetch함수이다.
};

# 사용예시

const { loading, data, refetch } = useAxios({
    url: "https://yts.mx/api/v2/list_movies.json"
  });

  return (
    <div className="App" style={{ height: "1000vh" }}>
      <h1>{data && data.status}</h1>
      <h2>{loading && "Loading"}</h2>
      <button onClick={refetch}>Refetch</button>
    </div>
  );

useAxios에서 opts를 { url: " 주소 " } 오브젝트로 전달해주었고

data가 있으면(API를 정상적으로 받아오면) data.status가 h1에 마운트되도록 만들었다.

로딩이 true일 경우에만 Loading이라는 문자열을 h2에 마운트하고

Refetch버튼을 누르면 refetch함수를 통해서 새로고침된다.

# 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 {
                    return;
                }
            });
        } else {
            new Notification(title, options);
        }
    };
    return fireNotif;
};

useNotification은 알림기능을 사용할때 쓰는 hook이다.

반환값은 fireNotif를 반환한다.

fireNotif는 운영체제 내에서 알림설정이 허용 되었을때만 실행된다.

useNotification의 첫번째 인자는 알림의 타이틀을 전달받고

두번째 인자는 옵션으로, Notification의 API웹사이트에서 확인해 볼 수 있다.

https://developer.mozilla.org/ko/docs/Web/API/Notification

( 사용예시로는 { body: "적고싶은 내용" } 옵션을 사용할 예정이다. )

# 설명

if (!("Notification" in window)) {
    return;
}

웹의 경우에만 알림이 뜨도록 설정한다.

const fireNotif = () => {
    if (Notification.permission !== "granted") {
        Notification.requestPermission().then((permission) => {
            if (permission === "granted") {
                new Notification(title, options);
            } else {
                return;
            }
        });
    } else {
        new Notification(title, options);
    }
};
return fireNotif;

권한이 허용되지 않았을때 권한획득을 요청한다.

Notification.requestPermission().then() 은 권한을 획득하기 위한 구문이다.

이 후 권한이 허용 되었다면 new Notification(title, options)를 통해서 알림을 띄우고

허용하지 않게되면 return하여 브레이크를 건다.

애초에 허용되어있다면 바로 알림을 띄운다.

# 사용예시

const triggerNotif = useNotification("Can I steal your kimch?", {
   body: "I love kimch dont you"
});

 <button onClick={triggerNotif}>hello</button>

triggerNotif변수를 선언해서 useNotification을 할당해주고 매게변수에 각각 타이틀과 옵션을 넣어준다.

이 후 버튼요소에 onClick이벤트를 넣어주고 triggerNotif를 할당해주어서 클릭시 Notification기능을 실행시킨다.

# 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 ${delay}s`;
            current.style.opacity = 1;
        }
    }, []);
    return { ref: element, style: { opacity: 0 } };
};

useFadeIn은 opacity를 사용하여 서서히 나타나는 기능을 사용할때 쓰는 hook이다.

반환값은 { ref: element, style: { opacity: 0 } } 을 반환한다.

즉 style.opacity를 통해서 투명도에 접근할 수 있게 만들어 준다.

# 설명

if (typeof duration !== "number" || typeof delay !== "number") {
    return;
}

우선 가장먼저 첫번째 전달인자(duration)와 두번째 전달인자(delay)가 숫자인지 확인하여 유효성 검사를 한다.

const element = useRef();

이 후에 element라는 변수를 선언해주고 useRef()를 할당해주고 임포트 시켜준다.( import {useRef} from "react" )

useRef로 인해 element는 ref(refenrence)속성으로 접근 가능하게 된다.

ex) <div ref={element} > hi </div>

그리고 useRef가 할당된 변수에는 current라는 속성이 추가되고, 이는 할당된 변수의 속성 전체를 감싸는 속성이 된다.

	useEffect(() => {
        if (element.current) {
            const { current } = element;
            current.style.transition = `opacity ${duration}s ease-in-out ${delay}s`;
            current.style.opacity = 1;
        }
    }, []);
    return { ref: element, style: { opacity: 0 } };

useEffect를 사용해서 ( element.current )가 true일때 = ( useRef가 할당된 변수일때 ) 함수를 실행하도록 만든다.

구조분해할당을 사용하여 element에서 current 속성을 가져온 후에 스타일에 접근하여

transition과 opacity를 변경할 수 있도록 구성해준다.

useFadeIn의 반환값은 ref: element , style: { opacity: 0 } 의 속성을 반환한다.

# 사용예시

 const fadeInH1 = useFadeIn(1, 2);
 const fadeInP = useFadeIn(5, 10);

 <h1 {...fadeInH1}>hello</h1>
 <p {...fadeInP}>holly sheet</p>

fadeInH1과 fadeInP를 선언해서 각각 h1,p 시멘틱테그에 적용할 수 있도록 만들어 준다.

useFadeIn의 첫번째 전달인자는 duration이고 두번째 전달인자는 delay이다.

속성(attribute)에 보면 { ...변수명 } 으로 해준 부분은 결과적으로 변수에 할당된 값을 적용(가져온다)시킨다는 뜻이다.

그렇게 되면 useFadeIn의 반환값인 { ref: element, style: { opacity: 0 } }를 가져오게 되고

각 전달인자에서 받은 값들이 적용된 결과를 보여주게 된다.

# 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);
    }, []);
    return state;
};

useScroll은 스크롤의 위치를 감지하여 확인할 수 있는 hook이다.

반환값은 { x : 0(위치) , y : 0(위치) }로 각 스크롤의 x와 y값을 반환한다.

# 설명

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

useState를 사용해서 객체리터럴 x와 y를 만들고 x에는 x좌표의 스크롤위치와

y에는 y좌표 스크롤 위치를 불러올 것이다.

const onScroll = () => {
    setState({ y: window.scrollY, x: window.screenX });
};

onScroll함수를 만들어주고 setState에 y = y스크롤위치, x = x스크롤위치를 넣어주는 기능을 넣어준다.

useEffect(() => {
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
}, []);
return state;

useEffect를 사용하여 이벤트 리스너를 걸어준다.

window에서 스크롤되면 onScroll함수를 실행시킨다.

스크롤이 될때마다 onScroll가 실행되고 onScroll 내부에서는 setState를 변환시켜주기 때문에

state의 값을 계속해서 re-render를 시켜준다.

그리고 컴포넌트가 보이지 않을때는 이벤트를 삭제 해준다.

# 사용예시

 const { y } = useScroll();

 <div className="App" style={{ height: "1000vh" }}>
     <h1 style={{ position: "fixed", color: y > 100 ? "red" : "blue" }}>hi</h1>
 </div>

구조분해할당을 사용하여 useScroll에서 y를 가져온다.

이 후에 style.color에 y가 100보다 크면 "red" 색상이 되고, 적으면 "blue"색상이 되도록 만들었다.

결과 : 스크롤을 내리면 red가 되고 가장위로 올리면 blue가 된다.

# 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", handleChange);
        window.addEventListener("offline", handleChange);

        return () => {
            window.removeEventListener("online", handleChange);
            window.removeEventListener("offline", handleChange);
        };
    }, []);
    return status;
};

useNetwork는 네트워크의 상태가 온라인인지 오프라인인지 확인할 수 있는 hook이다.

반환값은 boolean형이다. ( true = online && false = offline )

# 설명

const [status, setStatus] = useState(navigator.onLine);

useState의 디폴트값은 navigator.onLine 이다.

navigator는 브라우저에 대한 버전, 정보, 종류 등 여러속성을 가져올 수 있다.

이 후에 onLine으로 접근을 했기 때문에 onLine이면 ture, offLine이면 false를 반환한다.

const handleChange = () => {
    if (typeof onChange === "function") {    //onChange는 useNetwork의 Argument이다.
        onChange(navigator.onLine);
    }
    setStatus(navigator.onLine);
};

handleChange 함수를 만들어주고, 내용은 useNetwork의 Argument인 onChange가 함수일때

함수를 실행할 수 있도록 유효성검사를 거친 후에

setStatus함수를 통해서 status를 re-render 시켜주는 기능이다.

useEffect(() => {
    window.addEventListener("online", handleChange);
    window.addEventListener("offline", handleChange);

    return () => {
        window.removeEventListener("online", handleChange);
        window.removeEventListener("offline", handleChange);
    };
}, []);

return status; // useNetwork의 return값.

useEffect를 사용하여 window에 ( on / offLine 이벤트 )를 걸어주고 실행시킬 함수는 handleChange로 넣어준다.

컴포넌트가 실행되지 않을땐 이벤트를 삭제해주는 함수를 넣는다.

이 후 re-render된 status를 반환한다(true or false).

# 사용예시

 const handleNetworkChange = online => {
   console.log(online ? "We just went online" : "We are offline");
 };
 const onLine = useNetwork(handleNetworkChange);

 <h1>{onLine ? "Online" : "Offline"}</h1>

handleNetworkChange라는 새로운 변수를 만들어주고 해당속성에 직접 접근하기 위해서

매게변수 online 을 넣어준 후 콘솔로그를 만들어서 true일때와 false일때 반응하는 기능을 각각 넣어준다.

이 후에 onLine 이라는 새로운 변수를 만들고 useNetwork를 사용하고

전달인자에 handleNetworkChange함수를 넣어준다.

이렇게 되면 useNetwork는 status를 반환하고,

status는 boolean형으로 값을 반환하기 때문에

콘솔로그가 online일땐( true ) "We just went online" ,

offline일땐( false ) "We are offline" 로 찍히게 된다.