React에서 네트워크 상태 확인 커스텀 훅 만들기

React 애플리케이션을 개발하면서 사용자의 네트워크 상태를 확인하고 이에 따라 UI를 변경하는 기능이 필요할 때가 있습니다. 예를 들어, 사용자가 오프라인 상태일 때 네트워크 연결을 요청하거나, 특정 기능을 비활성화하고 싶을 수 있습니다. 이번 포스팅에서는 네트워크 상태를 확인하는 커스텀 훅인 useNetworkStatus를 만들어 보겠습니다.

1. 커스텀 훅 useNetworkStatus 만들기

useNetworkStatus 훅은 사용자의 네트워크 상태를 실시간으로 감지하여 반환합니다. navigator.onLine 속성을 이용하여 초기 상태를 설정하고, window 객체의 online 및 offline 이벤트를 사용하여 네트워크 상태 변경을 감지합니다.

import { useEffect, useState } from 'react';

/** 네트워크 상태 확인 커스텀 훅 */
const useNetworkStatus = () => {
  const [isOnline, setIsOnline] = useState<boolean>(true);

  useEffect(() => {
    setIsOnline(navigator.onLine);

    const handleOnline = () => setIsOnline(true);
    const handleOffline = () => setIsOnline(false);

    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);

  return isOnline;
};

export default useNetworkStatus;

2. useNetworkStatus 훅 설명

• 초기 상태 설정: navigator.onLine 속성을 사용하여 사용자의 초기 네트워크 상태를 설정합니다.
• 이벤트 핸들러: handleOnline과 handleOffline 함수는 네트워크 상태 변경 시 호출됩니다. 각각 isOnline 상태를 true 또는 false로 설정합니다.
• 이벤트 리스너 등록 및 해제: window.addEventListener를 사용하여 online 및 offline 이벤트를 감지하고, 컴포넌트 언마운트 시 이벤트 리스너를 해제합니다.

3. useNetworkStatus 훅 사용하여 네트워크 상태에 따른 페이지 전환

이제 useNetworkStatus 훅을 만들어봤으니, 이를 실제 컴포넌트에서 사용해 보겠습니다.

import React from 'react';
import useNetworkStatus from './useNetworkStatus';
import NetworkErrorPage from 'components/networkError';

const App = () => {
  const isOnline = useNetworkStatus();
  
  if (!isOnline) {
    // 네트워크 off 일 때 네트워크 에러 페이지를 표시
    return <NetworkErrorPage />;
  }

  return (
    // ...
  );
};

export default App;

• 훅 사용: useNetworkStatus 훅을 호출하여 네트워크 상태를 확인합니다.
• UI 업데이트: isOnline 상태에 따라 네트워크 상태를 표시하고, 오프라인일 때 네트워크 에러 페이지를 표시합니다.