브라우저 인터넷 연결 확인하기 (with Javascript, React 커스텀 훅)

브라우저가 인터넷에 연결되어 있는지는 기본적으로 navigator.onLine 변수를 확인할 수 있다. boolean값으로 인터넷에 연결되어 있는지 확인할 수 있다.

다만, 지속적으로 브라우저가 인터넷에 연결되어있는지 확인하기 위해서는 이벤트 핸들러의 연결이 필요하다.

 

브라우저에서 지속적으로 인터넷 연결을 확인하는 방법으로 eventListener를 사용할 수 있다.

다음과 같은 간단한 코드를 통해서 인터넷 연결을 확인할 수 있다.

window.addEventListener("online", () => console.log("ONLINE! 🐥"));
window.addEventListener("offline", () => console.log("OFFLINE... 😿"));

콘솔창에 위의 코드를 입력하고 인터넷을 연결/해제 하면, 콘솔 로그가 남는 것을 확인할 수 있을 것이다.

 

인터넷 연결에 민감한 서비스를 만들고자 한다면, 온라인과 오프라인 이벤트 리스너는 매우 유용할 것 같다.

 

React에서 사용하기

React 공식문서 예제에서 영감을 받아 리액트에서 이벤트 리스너를 사용하여 인터넷 연결을 확인하는 커스텀 훅을 만들어 보았다..

초기 상태 값은 navigator.onLine을 사용하고, 이벤트 핸들러를 통해서 변하는 인터넷 상황에 따라 상태값을 변경해주었다.

export function useIsOnline() {
  const [isOnline, setIsOnline] = useState(true); // 상태 값
  // 이벤트 핸들러
  const handleOnline = useCallback(() => {
    setIsOnline(true);
  }, []);
  const handleOffline = useCallback(() => {
    setIsOnline(false);
  }, []);
  useLayoutEffect(() => {
    setIsOnline(navigator.onLine); // 초기 값 설정
  }, []);
  // 이벤트 핸들러 연결
  useEffect(() => {
    window.addEventListener("online", handleOnline);
    window.addEventListener("offline", handleOffline);
    return () => {
      window.removeEventListener("online", handleOnline);
      window.removeEventListener("offline", handleOffline);
    };
  }, []);
  return isOnline; // 인터넷 연결 상태 반환
}

위의 커스텀 훅은 다음과 같이 사용할 수 있다.

const isOnline = useIsOnline();

 

 

 

https://developer.mozilla.org/ko/docs/Web/API/Navigator/onLine

Online and offline events - Web API | MDN

참고한 리액트 공식문서 예제

https://react.dev/learn/reusing-logic-with-custom-hooks

Reusing Logic with Custom Hooks – React