React 쿼리를 사용하여 Expo React 네이티브 프로젝트를 설정하는 방법

외부 API와의 상호작용은 종종 필수적이며, React Query는 데이터를 가져오는 복잡성보다 데이터에 집중할 수 있도록 하여 이를 단순화합니다. 이 가이드는 Expo를 사용하여 React Native 프로젝트를 설정하고 이를 React Query와 통합하는 과정을 안내합니다.

1단계: 엑스포 프로젝트 설정

시작하려면 Expo CLI를 설치하고 새 프로젝트를 생성하세요. 이미 프로젝트가 있는 경우 다음 단계로 건너뛰세요.

• Expo CLI 설치:

  npm install -g expo-cli

• 새 프로젝트 만들기:

  expo init my-react-native-query-app

필요에 따라 템플릿을 선택하세요.

2단계: React 쿼리 및 종속성 설치

React Query는 React Native 앱의 서버 상태를 관리하는 데 강력합니다.

• React 쿼리 설치:

  npm install @tanstack/react-query

• 추가 종속성 설치:

  npx expo install @react-native-community/netinfo

3단계: 도우미 함수 만들기

프로젝트 루트의 후크 폴더에 세 개의 사용자 정의 후크를 생성하세요.

1. useAppState.ts:

   import NetInfo from '@react-native-community/netinfo';
   import { onlineManager } from '@tanstack/react-query';

   onlineManager.setEventListener((setOnline) => {
     return NetInfo.addEventListener((state) => {
       setOnline(!!state.isConnected);
     });
   });

이렇게 하면 앱이 인터넷에 다시 연결될 때 자동 다시 가져오기가 활성화됩니다.

1. OnlineManager.ts 사용:

   import { useEffect } from 'react';
   import { AppState, Platform } from 'react-native';
   import { focusManager } from '@tanstack/react-query';

   function onAppStateChange(status: AppStateStatus) {
     if (Platform.OS !== 'web') {
       focusManager.setFocused(status === 'active');
     }
   }

   useEffect(() => {
     const subscription = AppState.addEventListener('change', onAppStateChange);
     return () => subscription.remove();
   }, []);

이렇게 하면 앱이 활성화될 때 앱 상태가 업데이트됩니다.

1. useRefreshOnFocus.ts:

   import React from 'react';
   import { useFocusEffect } from '@react-navigation/native';

   export function useRefreshOnFocus<T>(refetch: () => Promise<T>) {
     const firstTimeRef = React.useRef(true);

     useFocusEffect(
       React.useCallback(() => {
         if (firstTimeRef.current) {
           firstTimeRef.current = false;
           return;
         }

         refetch();
       }, [refetch]),
     );
   }

이 맞춤 후크는 화면에 초점이 맞춰지면 다시 가져오기를 트리거합니다.

4단계: 루트 파일에 기능 구현

기본 경로 파일에서 다음을 설정합니다.

import {
  QueryClient,
  QueryClientProvider,
  focusManager,
} from "@tanstack/react-query";
import { AppStateStatus, Platform } from "react-native";
import { useOnlineManager } from "@/hooks/query/useOnlineManager";
import { useAppState } from "@/hooks/query/useAppState";

export default function RootLayout() {
  function onAppStateChange(status: AppStateStatus) {
    if (Platform.OS !== "web") {
      focusManager.setFocused(status === "active");
    }
  }

  const queryClient = new QueryClient({
    defaultOptions: { queries: { retry: 2 } },
  });

  useOnlineManager();
  useAppState(onAppStateChange);

  return (
    <QueryClientProvider client={queryClient}>
      {Rest of your project}
    </QueryClientProvider>
  );
}

5단계: 개발 서버 시작

프로젝트 디렉토리로 이동하여 Expo 개발 서버를 시작하세요.

expo start

Expo를 사용하면 Expo Go 앱을 통해 또는 개발 앱을 구축하여 빠르게 테스트할 수 있습니다. 개발 빌드 생성에 대한 자세한 내용은 Expo 설명서를 참조하세요.

결론

React Query를 사용하여 Expo React Native 프로젝트를 설정하면 상태 관리 및 API 상호 작용이 단순화됩니다. 캐싱 및 백그라운드 업데이트와 같은 React Query의 강력한 기능을 활용하면 데이터를 가져오는 복잡한 과정을 덜고 데이터에 더 집중할 수 있습니다.

즐거운 코딩하세요! ??‍? ??‍? ?

위 내용은 React 쿼리를 사용하여 Expo React 네이티브 프로젝트를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!