[React Native] 리액트 네이티브에서 NetInfo로 인터넷 연결 상태 확인하기 (RN 0.73)

모바일 어플리케이션에서 인터넷 연결 상태를 지속적으로 확인하는 일은 꽤 중요하다.

많은 경우, 특히 서버와 인터넷을 통해 통신하는 경우 인터넷 상태가 좋지 않으면 속도가 매우 느려지거나 결국 닿지 않는데, 사용자에게 이것이 어플리케이션 때문이 아니라 네트워크 때문인 것을 알려야 하기 때문이다.

 

@react-native-community/netinfo 모듈을 이용하면 쉽게 구현할 수 있다.

 

npm i @react-native-community/netinfo
cd iOS
pod install

 

이 모듈은 사용법이 매우 간단하다. 컴포넌트, 즉 앱이 마운트될 때 구독하고, 마운트 해제될 때 구독을 취소하면 된다. 그런데 심지어 더 간단한 훅을 사용할 수도 있다.

 

import {useNetInfo} from '@react-native-community/netinfo';
const netState = useNetInfo();

 

훅을 사용하면 연결 상태가 변할 때마다 netState 값이 업데이트된다.

 

netState의 속성은 다음과 같다.

 

- type (연결의 종류_none/unknown/wifi/cellular/bluetooth/ethernet/wimax/vpn/…)

- isConnected (boolean/null: 연결되어 있는지 아닌지)

- isInternetReachable (boolean/null: 현재 연결 상태에서 인터넷이 닿는지)

- isWifiEnabled (boolean: Android Only, 기계의 wifi가 켜져 있는지)

- details (type에 따라 달라진다고 한다.)

자세한 내용은 공식문서 참고