📡 52. React Native 네트워크 상태 감지와 오프라인 대응 전략 — NetInfo로 UX 챙기기

---

모바일 앱은 언제나 인터넷이 되는 환경에서만 실행되지 않는다.
지하철, 엘리베이터, 해외 네트워크 환경 등에서
네트워크가 끊기거나 불안정한 경우가 자주 발생한다.

그래서 앱은 오프라인 상태에서도 최소한의 UX를 제공할 수 있어야 한다.

이번 글은 React Native에서 네트워크 연결 상태를 감지하고 대응하는 전략을 정리한 글이다.

---

✅ NetInfo 라이브러리 설치

npm install @react-native-community/netinfo

• Android, iOS 모두 지원
• 실시간 연결 상태 감지 가능
• 연결 유형 (Wi-Fi, Cellular 등) 도 확인 가능

---

🔧 네트워크 상태 감지 코드 예시

import NetInfo from '@react-native-community/netinfo';

useEffect(() => {
  const unsubscribe = NetInfo.addEventListener((state) => {
    console.log('isConnected:', state.isConnected);
    console.log('connectionType:', state.type);
  });

  return () => {
    unsubscribe();
  };
}, []);

---

📡 상태 값 구조

{
  isConnected: true,
  isInternetReachable: true,
  type: 'wifi', // or 'cellular', 'none', ...
}

• isConnected: 네트워크 연결 여부
• isInternetReachable: 인터넷 실제 도달 가능 여부
• type: 연결 방식 (wifi, cellular, none 등)

---

💡 오프라인 상태 표시 예시

const [isOffline, setIsOffline] = useState(false);

useEffect(() => {
  const unsubscribe = NetInfo.addEventListener((state) => {
    setIsOffline(!state.isConnected || !state.isInternetReachable);
  });

  return () => unsubscribe();
}, []);

{isOffline && (
  <View style={{ backgroundColor: 'red', padding: 8 }}>
    <Text style={{ color: 'white' }}>📴 네트워크 연결이 끊겼습니다</Text>
  </View>
)}

✅ 상태 바처럼 상단에 띄우기
✅ Navigation 밖에 Global Banner로 처리하기도 함

---

🔁 네트워크 재시도 전략

상황	처리 방법
API 요청 시 실패	상태 저장 후 재시도 버튼 제공
앱 진입 시 네트워크 없음	안내 메시지 + pull to refresh UI
자동 재요청 필요	SWR, React Query의 retry 설정 활용

---

🧠 실전 팁

• 앱 로딩 시점부터 NetInfo.fetch()로 초기 상태 확인
• isConnected === true 여도 isInternetReachable === false일 수 있음 (wifi 연결 but no 인터넷)
• 오프라인 상태를 Zustand로 전역 관리하여 사용성 향상
• 네트워크 변화 이벤트는 너무 잦으니 debounce 처리 권장

---

📝 내가 느낀 점

예전엔 "인터넷 없으면 그냥 안 되지 뭐" 하고 무시했는데,
유저 입장에선 앱이 뻗은 걸로 보이고, 불편하다는 피드백이 많았다.

지금은 앱 전역에서 네트워크 상태를 감지해서
오프라인 배너, 데이터 재시도, 캐시 데이터 제공 등으로 UX를 최대한 유지하고 있다.

---

📶 “좋은 앱은 연결이 끊겨도 유저를 놓지 않는다.”

---