[React] 현재 네트워크 상태 확인

// 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.removeEventListener("offline", handleChange);
    };
  }, []);
  return status;
};

export default useNetwork;

// index.js

import React, { useEffect, useRef, useState } from "react";
import ReactDOM from "react-dom";
import useNetwork from "./useNetwork";

const App = () => {
  const handleNetworkChange = (online) => {
    console.log(online ? "We just went online" : "We are offline");
  };
  const onLine = useNetwork(handleNetworkChange);
  return (
    <div className="App">
      <h1>{onLine ? "Online" : "Offline"}</h1>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

 

navigator.online을 사용해서 현재 브라우저의 연결 상태를 bool형식으로 반환받습니다.

window에 online일때와 offline인 경우에 이벤트를 추가하여서 네트워크 상황에 따른 출력을 합니다.