[ React Native ] 인터넷 연결 환경 확인하기

오늘은 앱이 인터넷에 연결되어 있는지 아닌지 확인하는 방법에 대해서 써보려고해요.

예전에 받았던 리젝 사유 중 도무지 찾아도 어떤 환경에서 나오는지 모르겠는 스크린샷이 하나 덜렁 올라왔었는데 드디어 찾아냈습니다...!!

나참.. 리젝을 받고 이 이미지를 받은 후 너무 어이가 없었는데 여러분은 이 이미지만 보고 어떤 이유로 리젝을 받았는 지 확인이 가능하시다면 앞으로의 리젝은 두렵워하지 않으셔도 될 것 같네요 ㅠㅠㅠㅠ

본문으로 돌아가서 인터넷 연결 유/무를 확인하기 위해서는 또 라이브러리를 설치 해야겠죠?

npm install @react-native-community/netinfo

or

yarn add @react-native-community/netinfo

저는 우선 Android에서 실험만 해서 iOS에서도 동일한 방법으로 진행하는지는 추후에 실험해보고 게시물 수정할게요!

본격적으로 제가 사용한 코드로 안내를 드리자면

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

// 네트워크 연결 상태 확인
NetInfo.fetch().then(state => {
  console.log("Connection type", state.type);
  console.log("Is connected?", state.isConnected);
});

// 네트워크 연결 상태 변화 감지
const unsubscribe = NetInfo.addEventListener(state => {
  console.log("Connection type", state.type);
  console.log("Is connected?", state.isConnected);
});

useEffect(() => {
  const unsubscribe = NetInfo.addEventListener(state => {
    if (!state.isConnected) {
		// 앱이 인터넷에 열결되어 있지 않을 때 시킬 작업 또는 화면 노출
    }
  });
  return unsubscribe;
}, []);

useEffect(() => {
  const unsubscribe = NetInfo.addEventListener(state => {
    if (state.isConnected) {
    	// 다시 앱이 인터넷에 연결 되었을 때 실행시킬 작업
    }
  });
  return unsubscribe;
}, []);

이렇게 코드를 입력해서 인터넷에 연결되어 있을 때, 다시 연결 되었을 때 상태를 감지해서 상태 별 작업을 하도록 진행했어요.

실제로 네이버 앱에서도 이런 형태의 UI를 쓰고 있더라구요, 좋은 레퍼런스 인 것 같아서 저도 똑같이 만들어보려고 노력하고 있네요! 혹여나 같은 기능으로 업데이트가 된다면 코드와 함께 설명 드릴게요

오늘은 간단하게 앱이 인터넷에 연결되어 있을 때와 되어 있지 않을 때 작업을 해주는 방법에 대해서 알아봤는데요, 제 글이 도움이 되셨으면 좋겠네요.

우리 모두 리젝없이 한번에 심사에 통과하는 그날까지 화이팅해봐요. 그럼 다음 포스팅으로 돌아오겠습니다 :)