📡 63. React Native 네트워크 상태 기반 UX 전략 총정리

---

모바일 환경에서 가장 예측 불가능한 요소 중 하나는 네트워크 상태입니다.
느린 연결, 오프라인 상태에서도 앱이 자연스럽게 작동하려면
적절한 UX 대응 전략이 필요합니다.
이번 글에서는 React Native 앱에서 네트워크 상태를 고려한 UX 구현법을 정리해봅니다.

---

📡 1. NetInfo로 네트워크 상태 감지

✅ @react-native-community/netinfo 사용

• 온라인/오프라인 상태 구분
• 네트워크 타입 (wifi, cellular 등) 확인

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

useEffect(() => {
  const unsubscribe = NetInfo.addEventListener(state => {
    console.log('Is connected?', state.isConnected);
  });

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

---

🧾 2. 오프라인 배너 UI 구현

• 오프라인일 경우 상단에 경고 배너 표시
• 배경색, 애니메이션 등을 통해 사용자 인식 높이기

{!isConnected && (
  <View style={styles.banner}>
    <Text>인터넷 연결이 없습니다.</Text>
  </View>
)}

---

🔄 3. 자동 재시도 / 수동 새로고침 UX

• 네트워크 연결이 복구되면 자동 재요청 (SWR 전략)
• 사용자에게 수동 새로고침(리프레시 버튼, PullToRefresh 등) 제공

<ScrollView
  refreshControl={
    <RefreshControl
      refreshing={refreshing}
      onRefresh={refetch}
    />
  }
/>

---

💾 4. 캐싱 전략으로 UX 개선

• AsyncStorage, MMKV, react-query, SWR 등 사용하여
  최신 데이터를 캐싱하여 오프라인 상태에서도 표시 가능

import AsyncStorage from '@react-native-async-storage/async-storage'

await AsyncStorage.setItem('userData', JSON.stringify(data))

---

📥 5. 사용자 입력 데이터 보존 처리

• 오프라인 상태에서도 폼/작성 내용을 유지해야 함
• 일정 주기로 로컬 저장 또는 draft 기능 구현

---

⚙️ 6. 전송 실패 대응 UX

• 오프라인 중 전송한 요청은 실패 메시지 or 큐에 저장
• 연결 복구 시 자동 전송 (예: 채팅 앱의 메시지 큐)

---

🎯 마무리 정리

전략	핵심 키워드
네트워크 감지	NetInfo, isConnected
사용자 알림	오프라인 배너, alert
캐싱 처리	AsyncStorage, react-query
재시도 전략	SWR, 새로고침
사용자 입력 보존	draft 저장
실패 처리	큐잉, 전송 재시도

---

☝️ 네트워크 장애는 피할 수 없지만,
그 경험을 얼마나 부드럽게 만들 수 있느냐가
앱 완성도의 차이입니다. 🌐

---