React에서 유저의 네트워크 단절 상태를 핸들링 하는 방법

카테고리 없음

React에서 유저의 네트워크 단절 상태를 핸들링 하는 방법

ANG DEV 2022. 7. 31. 16:05

React에서 브라우저의 네트워크 단절 상태를 핸들링 하는 방법에 대해 소개합니다.

| Handling Internet Disconnection In React Applications.

🔎 필요성

프론트에서 예외 처리 로직을 추가할 때,

사용자에게 상황에 맞는 적합한 피드백을 실제로 주고 있는지 점검해볼 필요가 있습니다.

이를 통해 부족한 예외 처리를 정리하고, 우선 순위를 고려해 사용자 경험을 높여가는 것이 중요합니다.

(유저 플로우와 맞는 예외 처리는 사용자 접속 및 유지율 향상에도 영향을 미치기 때문)

본 게시물에선 유저 브라우저 상태에 따라 네트워크 단절 상태에 맞는 UI를 제공하도록

브라우저 navigator를 활용해 React 애플리케이션에서 적합한 네트워크 상태를 체크하는 방법을 정리했습니다.

| Communicate status change to the user

동적인 페이지라면, 유저가 접속하면 인터랙션에 맞게 API를 호출하여 브라우저에 그려질 데이터를 갱신하고 패치해야 합니다.

사용자의 안정적인 인터넷 연결을 매번 기대할 수 없기 때문에, 활성 네트워크 유무를 체크해 사용자에게

현재 장애는 `인터넷 연결이 되지 않아` 발생하고 있음을 알리고, 네트워크 연결이 다시 시작될 때까지 대체 UI가 표기되도록 상태를 점검해야합니다.

📌 네트워크 상태를 감지 custom hook 생성

import { useEffect, useState } from 'react';

/**
 * @description
 * 브라우저의 navigator 상태 감지하여 현재 인터넷 연결 상태(online)를 반환해주는 hook입니다.
 * @returns true | false
 * @example
 *
 * const isOnline = useCheckOnlineStatus();
 * isOnline === boolean 타입
 *
 */

const useCheckOnlineStatus = () => {
  const [isOnline, setIsOnline] = useState(navigator.onLine);

  const handleOnlineStatus = () => {
    setIsOnline(navigator.onLine);
  };

  useEffect(() => {
    /* 
      현재 온/오프라인 상태가 변경될 때 감지 할 수 있습니다.
      window.alert(isOnline); 
    */
    window.addEventListener('online', handleOnlineStatus);
    window.addEventListener('offline', handleOnlineStatus);

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

  return isOnline;
};

export default useCheckOnlineStatus;

구현된 useCheckOnlineStatus 훅의 내부 동작을 살펴보면, navigator로 사용자의 네트워크 환경을 체크하고,

온/오프라인이 변경될 때 감지될 수 있도록 useEffect 안에서 이벤트리스너를 감지하고 있습니다.

또한 useCheckOnlineStatus() 을 호출하는 곳에서 isOnline 유무를 반환하는 boolean 값으로 로드 상태를 확인해 화면을 표기하거나, 에러 페이지를 가져올 수 있습니다.

useCheckOnlineStatus() 을 호출하는 곳에서 isOnline 유무를 반환하는 boolean 값으로 에러 페이지를 표시하거나,

로드 상태를 확인해 인터넷이 재 연결되는 시점에서는 원래 화면이 표기될 수 있도록 처리하고 있습니다.

export const Main = ({ data }) => {
  const isOnline = useCheckOnlineStatus();
  
  if (!isOnline) return <NetworkErrorPage />;
  return <MainSection />
};

export default DashBoardFrame;

| 📌 마무리

사용자에게 알맞은 UI를 던져주는 것을 중요하게 생각하는데 유저와 개발자가 생각하는 그 흐름이 동일해야 한다고 생각합니다.

요청에 실패했다면 정확한 예외 처리를 통해오류의 원인를 표기해주는 것이 FE에서 담당해야하는 중요한 커뮤니케이션의 일부입니다.

즉, 문제 해결에 필요한 고민을 사용자로부터 시작되게 하지 말아야하며, 대응 가능한 에러 상황에 대해서는 명확한 예외 처리를 진행해줘야 합니다.

티스토리