[react-native-netinfo] React Native에서 IP주소 확인하기

인턴을 하면서 이제 프론트를 개발할 시간이 왔다 . 폰을 VR 기기에 넣어서 확인해야하기 때문에 앱으로 개발해야했고 나는 원래는 웹을 주로 개발해왔고 RN만 연구실 인턴 당시 개발해본 경험이 있기 때문에 RN으로 골랐고 RN이 개발되어있는 라이브러리도 많아서 최적의 선택이라고 생각했다. 그리고 처음엔 PWA로 개발해볼까? 라는 생각도 하긴 했었는데 PWA로 하면 내가 생각했던 기능 중 하나를 구현하지 못한다는 걸 알고 포기했다. 내가 생각했던 기능은 ⭐️현재 내가 연결된 IP를 자동으로 인식해 IP를 주입해주는 기능⭐️이다.

생각하게 된 이유

이미 개발되어있는 초기 버전의 앱이 있어 사용해보며 프로토타입을 고민해봤는데 불편했던 점 중 하나가 ip 주소를 외우고 있어야 검색할 수 있는 상태라는 점이었다. 그래서 어짜피 라즈베리 파이는 같은 IP 내에 들어와야 통신이 가능하니 내가 접속되어 있던 IP를 자동으로 받아와 보여주면 사용성이 올라갈 것 같다는 생각을 하게 되었다.

그래서 어떻게 구현할 수 있을지 검색해보다 react-native-netinfo로 가능할 것 같다는 생각을 했다. 일단 react의 hook 처럼 사용할 수 있다는 메리트도 있었다.

{
   "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"
}

이제 console에 찍히면 다음과 같이 나온다. 우리가 집중할 부분은 ipAddress이다.

일단 네트워크의 기본 정보를 체크해볼 수 있는데

isConnected	active network connection이 있는 경우 = true
isInternetReachable	현재 active network connection으로 인터넷에 연결할 수 있는지 여부 = 가능하면 true
isWifiEnabled	[only Android]기기의 wifi 온/오프 여부 = 켜진 경우 true
type	현재 연결 상태의 타입

다음으로 detail 은 이런 옵션들이 존재한다.

bssid	네트워크의 BSSID 확인 → 확인 못하는 경우 : null
frequency	네트워크 주파수 확인
ipAddress	외부 IP 주소. IPv4 또는 IPv6 형식 → 확인할 수 없는 경우 : 존재하지 않음
isConnectionExpensive	network connection이 비용이 많이 든다고 간주되는 경우 : 에너지 또는 금전적인 조건 중 하나
linkSpeed	링크 속도
rxLinkSpeed	현재 수신 링크 속도
strength	신호 세기를 나타내는 0부터 100까지의 정수. 신호 세기를 결정할 수 없는 경우 존재하지 않을 수 있음.
txLinkSpeed	현재 전송 링크 속도

실현 방법

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

NetInfo.fetch().then(state => {
  console.log(" 연결 타입:", state.type);
  console.log(" 인터넷 연결 여부:", state.isConnected);
  console.log(" IP 주소:", state.details?.ipAddress);
});

const [ip, setIp] = useState<string | null>(null);

useEffect(() => {
  NetInfo.fetch().then(state => {
    setIp(state.details?.ipAddress ?? 'IP주소 확인 불가능 ');
  });
}, []);

다음과 같이 IP를 알아낸 다음 IP를 띄우면 접속이 가능토록 하고자 한다.