[Setting | ReactNative] 개발환경 구축하기 (5) - React Query 적용

앱에서 데이터를 관리하기 위해 React Query를 적용하는 방법을 정리한다.

> 작성일 : 2025-01-30
> OS : macOS Sequoia 15.2 (Apple M4)
> NodeJS : v22.13.1
> NPM : v10.9.2
> ReactNative : v0.77

기본앱 설치 후 진행 - Link 메뉴얼 참고 - Link

<1> React Query 설치

생성된 프로젝트에서 아래 명령을 수행

npm install @tanstack/react-query

<2> QueryClientProvider로 감싸기

앱의 레이아웃 최상위에 QueryClientProvider로 감싸주어 전역에서 사용할 수 있도록 한다.

// Create a client
const queryClient = new QueryClient()

function App() {
  return (
    // Provide the client to your App
    <QueryClientProvider client={queryClient}>
      <Todos />
    </QueryClientProvider>
  )
}

function Todos() {
  // Access the client
  const queryClient = useQueryClient()

  // Queries
  const query = useQuery({ queryKey: ['todos'], queryFn: getTodos })

  // Mutations
  const mutation = useMutation({
    mutationFn: postTodo,
    onSuccess: () => {
      // Invalidate and refetch
      queryClient.invalidateQueries({ queryKey: ['todos'] })
    },
  })

  return (
    <div>
      <ul>{query.data?.map((todo) => <li key={todo.id}>{todo.title}</li>)}</ul>

      <button
        onClick={() => {
          mutation.mutate({
            id: Date.now(),
            title: 'Do Laundry',
          })
        }}
      >
        Add Todo
      </button>
    </div>
  )
}

<3> ReactQuery 분리 설정

ReactQuery.tsx 파일을 분리해 에러처리 옵션설정을 할 수 있다.

<3-1> Navigator 설정을 감싸준다.

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import HomeTabNavigator from './HomeTabNavigator';
import ReactQuery from './ReactQuery';

export default function RootNavigator() {
  // Define
  const NativeStack = createNativeStackNavigator();
  // View
  return (
    <ReactQuery>
      <NavigationContainer>
        <NativeStack.Navigator initialRouteName="HomeTabNavigator">
          <NativeStack.Screen name="HomeTabNavigator" component={HomeTabNavigator} options={{ headerShown: false }} />
        </NativeStack.Navigator>
      </NavigationContainer>
    </ReactQuery>
  );
}

<3-2> ReactNode를 전달받아 공통 에러처리 및 옵션설정을 한다.

import { QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query';

export default function ReactQuery({ children }: { children: React.ReactNode }) {
  const queryClient = new QueryClient({
    queryCache: new QueryCache({
      onError: (error: any, query: any) => {
        // 에러처리
      }
    }),
    defaultOptions: {
      queries: {
        // 옵션설정
        refetchOnWindowFocus: false,
        retry: false
      }
    }
  });
  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
}

Tags : react native reactQuery적용, React Query 설정, RN React Query, @tanstack/react-queryn 설정