- React의 Context API를 활용하여 네트워크 연결 상태 관리를 위한 컨텍스트를 생성합니다. - NetworkContext를 사용함으로써, 앱의 어느 부분에서든 네트워크 상태 체크를 쉽게 제어할 수 있으며, 특정 화면에서 네트워크 체크를 제외하는 요구사항을 간편하게 구현할 수 있습니다.
💡 NetworkContext 사용예시
1. NetworkContext 생성 - React의 createContext를 사용하여 네트워크 상태 관리를 위한 컨텍스트를 만듭니다.
2. NetworkProvider 컴포넌트 - 네트워크 상태를 관리하고, 하위 컴포넌트에 상태와 상태 변경 함수를 제공합니다.
3. 네트워크 상태 감지 - useEffect 훅을 사용하여 NetInfo.addEventListener를 등록하고, 네트워크 연결이 끊어졌을 때 알림을 표시합니다.
4. useNetwork 훅 - 이 훅을 통해 다른 컴포넌트에서 NetworkContext를 쉽게 사용할 수 있습니다.
// NetworkContext.tsximport React, { createContext, useState, useContext, useEffect } from'react';
import NetInfo, { NetInfoSubscription } from'@react-native-community/netinfo';
import { Alert } from'react-native';
// 1. createContext를 사용하여 네트워크 상태 관리를 위한 컨텍스트를 만듭니다.const NetworkContext = createContext({
isNetworkCheckEnabled: true, // 네트워크 상태 연결 여부 setNetworkCheckEnabled: (enabled: boolean) => { } // 네트워크 상태 연결 상태 변경
});
/**
* 2. 네트워크 상태를 관리하고, 하위 컴포넌트에 상태와 상태 변경 함수를 제공합니다.
* @param param0
* @returns
*/exportconst NetworkProvider = ({ children }: { children: any }) => {
const [isNetworkCheckEnabled, setNetworkCheckEnabled] = useState(true); // 네트워크 연결 상태 체크 여부 /**
* 3. NetInfo.addEventListener를 등록하고, 네트워크 연결이 끊어졌을 때 알림을 표시합니다.
* - isNetworkCheckEnabled 상태를 통해서
*/
useEffect(() => {
let unsubscribe: NetInfoSubscription | null = null;
if (isNetworkCheckEnabled) {
// 리스너를 등록합니다.
unsubscribe = NetInfo.addEventListener(state => {
// 네트워크 연결이 되지 않았을 경우 Alert을 출력합니다.if (!state.isConnected) {
Alert.alert("네트워크 연결이 끊겼습니다.", "디바이스 연결 상태를 확인해주세요.");
}
});
}
return() => {
// 리스너 clean-upif (unsubscribe) {
unsubscribe();
}
};
}, [isNetworkCheckEnabled]);
return (
<NetworkContext.Providervalue={{isNetworkCheckEnabled, setNetworkCheckEnabled }}>
{children}
</NetworkContext.Provider>
)
}
// 4. 이 훅을 통해 다른 컴포넌트에서 NetworkContext를 쉽게 사용할 수 있습니다.exportconst useNetwork = () => useContext(NetworkContext);
[ 더 알아보기 ] 💡 React 내에 Context API
- React에서 제공하는 상태 관리 도구로, 컴포넌트 트리 전체에 데이터를 효율적으로 전달할 수 있게 해 줍니다. - 테마, 인증 상태, 언어 설정 등 애플리케이션 전반에 걸쳐 공유되어야 하는 데이터를 관리하는 데 유용합니다. - 하지만 모든 상황에 적합한 것은 아니며, 컴포넌트 재사용성을 해칠 수 있으므로 적절한 상황에서 사용해야 합니다.
특징
설명
전역 상태 관리
프롭스 드릴링(props drilling) 없이 컴포넌트 트리 전체에 데이터를 전달할 수 있습니다.
간편한 사용
createContext(), Provider, useContext() 훅을 통해 쉽게 구현할 수 있습니다.
성능 최적화
필요한 컴포넌트에서만 context를 구독하여 불필요한 리렌더링을 방지할 수 있습니다.
동적 업데이트
Provider의 value prop을 통해 context 값을 동적으로 업데이트할 수 있습니다.
- 해당 페이지에서는 네트워크 통신 없이도 수행이 되도록 해야 하기에 해당 페이지에 체크를 수행하지 않도록 하였습니다.
💡 사용 예시
- 아래와 같이 TestScreen에서 네트워크 체크를 수행하지 않도록 구성하였습니다.
- NetworkContext 내에서 구성한 useNetwork hook을 선언하여, 네트워크 체크를 수행하지 않도록 하는 setNetworkCheckEnabled 메서드를 불러옵니다. - 해당 페이지가 렌더링 될 때 네트워크 체크 상태를 비활성화하고, 해당 페이지를 떠날 경우 다시 활성화를 합니다.
import { useNetwork } from"../../common/context/NetworkContext";
const TestScreen = ({ route, navigation, appState }: CommonType.CommonProps) => {
const { setNetworkCheckEnabled } = useNetwork();
useEffect(() => {
setNetworkCheckEnabled(false); // 해당 화면에서 네트워크 체크 비활성화
}, []);
return() => {
setNetworkCheckEnabled(true); // 네트워크 화면 벗어날 때 다시 활성화
}
}
exportdefault TestScreen;
[ 더 알아보기 ] 💡 해당 페이지가 부모 페이지인 경우 하위 페이지가 있다면 모두 적용을 해야 할까?
- 자식 컴포넌트들에 대해서는 별도로 네트워크 체크를 비활성화할 필요가 없습니다. - NetworkProvider를 사용한 방식에서는 상위 컴포넌트(StudyScreen)에서 네트워크 체크를 비활성화하면, 그 하위의 모든 자식 컴포넌트들에도 자동으로 적용됩니다. React의 Context API의 특성 때문입니다. - Context는 컴포넌트 트리 전체에 데이터를 제공하므로, StudyScreen에서 설정한 네트워크 체크 상태가 모든 하위 컴포넌트에 자동으로 전파됩니다.
