[React] useEffect를 사용하여 network on/off 표시

코드

import React, {useState, useRef, useEffect} from 'react'

function useNetwork(onChange) {
  const [status, setStatus] = useState(navigator.onLine);

  function 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;
}



export default function App() {
  function handleNetworkChange(online) {
    console.log(online ? 'we just went online' : 'we are offline')
  }
  const onLine = useNetwork(handleNetworkChange);

  return (
    <div>
      <h1>{onLine ? 'online' : 'offline'}</h1>
    </div>
  )
}

배운점

• navigator.online은 개발자도구 network의 online/offline을 boolean 형태로 반환