728x90
아무래도 대부분의 모바일 앱은 인터넷 연결이 필요한 경우가 많다.
React Native 개발중에도 대부분의 경우 와이파이나 모바일 네트워크 연결이 필요한 경우가 대다수인데, API 요청을 보내고 나서야 네트워크가 연결되지 않은 것을 확인하는 케이스를 좀 더 진지하게 생각해보기로 하였다.
앱을 사용하는 도중에 와이파이 연결을 까먹고 에러가 나는 것 보다, 네트워크 연결이 필요한 앱이라면 처음부터 네트워크가 연결되지 않았음을 알려주는 편이 더 좋다고 생각하였다.
그래서 RN에서 네트워크 연결을 확인하는 방법에 대해서 알아보았고, 결과물을 공유하고자 한다.
@react-native-community/netinfo
위의 라이브러리를 통해서 손쉽게 네트워크 연결 상태를 확인할 수 있다.
npm i @react-native-community/netinfo
설치 후 IOS 환경에서 사용하고자 한다면 pod install 까지 해주자.
npx pod-install
공식문서에서 소개하는 사용법은 다음과 같다.
import NetInfo from "@react-native-community/netinfo";
// Subscribe
const unsubscribe = NetInfo.addEventListener(state => {
console.log("Connection type", state.type);
console.log("Is connected?", state.isConnected);
});
// Unsubscribe
unsubscribe();
이벤트 리스너를 통해서 네트워크 연결 상태를 전달받는 것이다.
네트워크의 타입을 문자열로, 연결 상태를 boolean타입으로 전달받을 수 있다.
좀 더 React Native에서 실전적으로 사용할 수 있게 커스텀 훅의 형태로 만들어보았다.
import {useEffect} from 'react';
import {Alert} from 'react-native';
import NetInfo from '@react-native-community/netinfo';
const useCheckNetInfo = () => {
useEffect(() => {
const unsubscribe = NetInfo.addEventListener(state => {
console.log('Connection type', state.type);
if (!state.isConnected) {
Alert.alert('Network disconnected!');
}
});
return () => unsubscribe();
}, []);
};
export default useCheckNetInfo;
위의 훅을 활성화시켜보자.
만약 앱 사용중에 와이파이 연결이 끊긴다면, 알림창이 뜰 것이다.
이벤트 핸들러의 형태로 연결하는 것 뿐만 아니라, 함수를 호출하여 그때의 연결 상태를 한 번만 확인할 수도 있다.
NetInfo.fetch().then(state => {
console.log("Connection type", state.type);
console.log("Is connected?", state.isConnected);
});
☁️ 참고한 공식문서
https://github.com/react-native-netinfo/react-native-netinfo
728x90
'React Native' 카테고리의 다른 글
react-native-bootsplash을 사용하여 splash screen 구현하기 (0) | 2023.07.25 |
---|---|
React-Router-Dom을 React Native에서 사용하기 (React-Router-Native) (0) | 2023.05.31 |
React Native 앱 Drawer 구현하기 (react-native-gesture-handler) (0) | 2023.05.26 |
ignite - React Native의 boilerplate (0) | 2023.05.20 |
React Native 생체인증 사용하기 (react-native-biometrics) (0) | 2023.04.28 |