네트워크 정보 확인하기 | @react-native-netinfo

@react-native-netinfo

Android, iOS, macOS, Windows & Web용 리액트 네이티브 네트워크 정보 API 라이브러리로, 다음과 같은 정보를 얻을 수 있습니다.

• Connection type
• Connection quality

자세한 정보는 하단에서 설명을 이어가도록 하겠습니다.

Install

npm install --save @react-native-community/netinfo
# 또는 
yarn add @react-native-community/netinfo

Usage

다음과 같이 React hook 처럼 사용할 수 있습니다.

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

const TextComponent = () => {
  const netInfo = useNetInfo();
  
  return (
    <View>
      <Text>Type: {netInfo.type}</Text>
      <Text>Is Connected? {netInfo.isConnected?.toString()}</Text>
    </View>
  );
}

console.log(netInfo)를 통한 출력 결과

# iOS
{
   "details":{
      "ipAddress":"00.00.00.00",
      "isConnectionExpensive":false,
      "subnet":"000.000.000.0"
   },
   "isConnected":true,
   "isInternetReachable":true,
   "type":"wifi"
}

# Android
{
   "details":{
      "bssid":"00:00:00:00:00:00",
      "frequency":2447,
      "ipAddress":"00.0.0.00",
      "isConnectionExpensive":false,
      "linkSpeed":1,
      "rxLinkSpeed":2,
      "strength":99,
      "subnet":"000.000.000.0",
      "txLinkSpeed":1
   },
   "isConnected":true,
   "isInternetReachable":true,
   "isWifiEnabled":true,
   "type":"wifi"
}

Types

NetInfoState

네트워크의 현재 상태를 설명합니다.

Property	Type	Description
type	NetInfoStateType	현재 연결 상태의 타입
isConnected	boolean, null	active network connection이 있는 경우, unknown 네트워크에 대한 대부분의 플랫폼에서 기본값은 null
isInternetReachable	boolean, null	현재 active network connection으로 인터넷에 연결할 수 있는지 여부 알 수 없는 경우 기본값은 null
isWifiEnabled	boolean	only Android, 기기의 wifi 온/오프 여부
details	-	details는 type 값에 따라 달라짐

details

details는 type에 따라 달라집니다.

type이 none 또는 unknown 일 때,
details: null

type이 wifi 일 때,

Property	Platform	Type	Description
isConnectionExpensive	Android, iOS, macOS, Windows, Web	boolean	network connection이 "비용이 많이 든다"고 간주되는 경우. 에너지 또는 금전적인 조건 중 하나일 수 있습니다.
ssid	Android, iOS (not tvOS), Windows	string	네트워크의 SSID 확인할 수 없는 경우 null 또는 빈 문자열일 수 있습니다.
bssid	Android, iOS (not tvOS), Windows*	string	네트워크의 BSSID 확인할 수 없는 경우 null 또는 빈 문자열일 수 있습니다.
strength	Android, Windows	number	신호 세기를 나타내는 0부터 100까지의 정수. 신호 세기를 결정할 수 없는 경우 존재하지 않을 수 있습니다.
ipAddress	Android, iOS, macOS, Windows	string	외부 IP 주소. IPv4 또는 IPv6 형식일 수 있습니다. 확인할 수 없는 경우 존재하지 않을 수 있습니다.
subnet	Android, iOS, macOS	string	IPv4 형식의 서브넷 마스크. 확인할 수 없는 경우 없을 수 있습니다.
frequency	Android, Windows*	number	네트워크 주파수 예: 2.4GHz 네트워크의 경우 2457을 반환. 확인할 수 없는 경우에는 존재하지 않을 수 있습니다.
linkSpeed	Android	number	링크 속도(Mbps)
rxLinkSpeed	Android	number	현재 수신 링크 속도(Mbps) (Android Q / API 레벨 29 이상)
txLinkSpeed	Android	number	현재 전송 링크 속도(Mbps) (Android Q / API 레벨 29 이상)

* appxmanifest에 wiFiControl 기능이 필요합니다. 기능이 없으면 값은 null이 됩니다.

type이 cellular 일 때,

Property	Platform	Type	Description
isConnectionExpensive	Android, iOS, macOS, Windows, Web	boolean	네트워크 연결이 "비싸다"고 간주되는 경우, 이는 에너지 또는 금전적인 측면에서 이루어질 수 있습니다.
cellularGeneration	Android, iOS, Windows	NetInfoCellularGeneration	사용자가 연결되어 있는 셀 네트워크의 생성입니다. 이것은 속도에 대한 표시는 할 수 있지만 보장은 없습니다.
carrier	Android, iOS	string	네트워크 통신사 이름 존재하지 않거나 확인할 수 없는 경우 비어 있을 수 있습니다.

type이 bluetooth, ethernet, wimax, vpn, other 일 때,

Property	Type	Description
isConnectionExpensive	boolean	네트워크 연결이 "비싸다"고 간주되는 경우, 이는 에너지 또는 금전적인 측면에서 이루어질 수 있습니다.

마무리

• 이런 네트워크 정보를 이용하여 앱에서 네트워크 상태에 따른 모달이나 여러 동작들을 할 수 있습니다.
• 네트워크 상태에 대해 고려해본 적 없었는데, 네트워크가 약한 환경에서 앱이 실행된다면 정상적으로 동작하지 않을 수 있다는 것을 깨닫게 되었습니다.
• iOS는 정책상 제한된 정보만 얻을 수 있다는 것이 아쉬운 부분.. 힝...