[TIL] useNetwork

useNetwork

인터넷 접속 상태에 관련한 Hook이다. 인터넷이 연결이 online 또는 offline에 따라 브라우저에 다른게 출력되는 것을 확인해 볼 수 있다.

useNewwork() 함수를 만들어 파라미터로 onChange를 주고 ruturn으로 status 값을 준다. 그다음 useState를 사용하여 초깃값을 설정한다 (navigator.onLine은 online 상태면 true 아니면 flase 이 두 가지 값만 반환한다)

useEffect()를 사용하여 이벤트를 등록하는데 online, offline 둘 다 handleChange() 함수를 호출한다 마운트 되고 나서 한 번만 실행하기 위해 빈 배열을 넣고 화면이 종료되면 이벤트도 삭제되게 ruturn에 이벤트 삭제를 추가했다.

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() 함수의 파라미터 onChange에 들어갈 handleNetwork() 함수를 만든다 이 함수의 파라미터 onLine은 위 handleChange() 함수의 if 함수를 통해 조건값이 같으면 onChange에 파라미터 **navigator.onLine(ture or false)**을 준다 그럼 이제 콘솔 창에 입력할 문구를 삼항연산자를 통해 ture 또는 flase를 판별에 조건에 맞는 문구를 콘솔 창에 출력한다

onLine 변수에 useNetwork(handleNetwork)를 대입하여 h1 태그에 삼항연산자를 사용하여 브라우저 화면과 console 창에 원하는 값을 출력한다.

const App = () => {
  const handleNetwork = onLine => {
    console.log(onLine ? ' Online입니다' : 'Offline입니다')
  }
  const onLine = useNetwork(handleNetwork)
  return (
    <div className="App">
      <h1>{onLine ? 'Online' : 'Offline'}</h1>
      <p>Wellcome Nice too meet you!</p>
    </div>
  )
}

[최종코드]

import React, { useState, useEffect, useRef } from 'react'
import ReactDOM from 'react-dom'

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
}

const App = () => {
  const handleNetwork = onLine => {
    console.log(onLine ? ' Online입니다' : 'Offline입니다')
  }
  const onLine = useNetwork(handleNetwork)
  console.log(useNetwork())
  return (
    <div className="App">
      <h1>{onLine ? 'Online' : 'Offline'}</h1>
      <p>Wellcome Nice too meet you!</p>
    </div>
  )
}

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

  rootElement
)