[ React Hook ] 5. useNetwork

# 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" 로 찍히게 된다.