React에서 React Query 사용법

 

React Query는 클라이언트 상태 관리 및 서버 상태 관리를 간편하게 할 수 있도록 도와주는 강력한 라이브러리입니다. 이 글에서는 React Query의 기본 개념과 사용법을 살펴보고, 주요 기능과 코드 예제를 통해 실제로 어떻게 활용할 수 있는지 상세히 설명하겠습니다.

1. React Query란 무엇인가?

React Query는 서버에서 데이터를 가져오고, 캐싱하고, 동기화하며 업데이트를 관리하는 데 초점을 맞춘 라이브러리입니다. 데이터 패칭을 단순화하고 클라이언트와 서버 간 상태 관리를 보다 효율적으로 처리할 수 있게 해줍니다.

주요 특징

• 자동 캐싱: 데이터를 요청하면 자동으로 캐싱되어 성능이 향상됩니다.
• 자동 리페치: 데이터가 변경될 때 실시간으로 리페치하여 최신 상태를 유지합니다.
• 백그라운드 동기화: 앱이 포커스될 때 또는 네트워크 상태가 변경될 때 데이터를 자동으로 동기화합니다.
• 사용자 정의 가능한 쿼리: 원하는 대로 쿼리 동작을 제어할 수 있습니다.

---

2. React Query 설치 및 초기 설정

설치

React Query를 사용하려면 먼저 프로젝트에 설치해야 합니다. 아래 명령어를 실행하세요:

npm install @tanstack/react-query

또한, 개발 환경에서 React Query Devtools를 사용하면 쿼리 상태를 시각적으로 확인할 수 있어 유용합니다:

npm install @tanstack/react-query-devtools

기본 설정

React Query를 사용하려면 QueryClient와 QueryClientProvider를 설정해야 합니다.

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

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourComponent />
    </QueryClientProvider>
  );
}

export default App;

---

3. React Query의 주요 기능

3.1 데이터 가져오기 (useQuery)

useQuery 훅은 데이터를 가져오는 가장 기본적인 방법입니다. 서버에서 데이터를 비동기로 가져오고, 이를 자동으로 캐싱하고 관리합니다.

사용 예제

import { useQuery } from '@tanstack/react-query';

function fetchTodos() {
  return fetch('https://jsonplaceholder.typicode.com/todos').then(res => res.json());
}

function Todos() {
  const { data, isLoading, error } = useQuery(['todos'], fetchTodos);

  if (isLoading) return

Loading...

;
  if (error) return

Error: {error.message}

;

  return (

{data.map(todo => (
• {todo.title}
))}

  );
}

주요 옵션

• queryKey: 쿼리를 식별하는 고유 키입니다.
• queryFn: 데이터를 가져오는 함수입니다.
• staleTime: 데이터가 신선한 상태로 유지되는 시간입니다.

---

3.2 데이터 변이 (useMutation)

useMutation 훅은 데이터를 생성, 수정, 삭제할 때 사용됩니다. 주로 서버 상태를 변경하는 작업에 사용됩니다.

사용 예제

import { useMutation, useQueryClient } from '@tanstack/react-query';

function addTodo(newTodo) {
  return fetch('https://jsonplaceholder.typicode.com/todos', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(newTodo),
  }).then(res => res.json());
}

function TodoForm() {
  const queryClient = useQueryClient();
  const mutation = useMutation(addTodo, {
    onSuccess: () => {
      queryClient.invalidateQueries(['todos']);
    },
  });

  const handleSubmit = () => {
    mutation.mutate({ title: 'New Todo', completed: false });
  };

  return (
    
      Add Todo
    
  );
}

주요 옵션

• onSuccess: 성공 시 실행되는 콜백 함수입니다.
• onError: 오류 발생 시 실행되는 콜백 함수입니다.
• onSettled: 성공 또는 실패 후 항상 실행됩니다.

---

3.3 쿼리 무효화

React Query는 데이터가 변경되었을 때 기존 데이터를 무효화하고 새 데이터를 가져옵니다. useQueryClient의 invalidateQueries 메서드를 활용하면 특정 쿼리를 갱신할 수 있습니다.

사용 예제

const queryClient = useQueryClient();
queryClient.invalidateQueries(['todos']);

---

4. 고급 사용법

4.1 Pagination (페이지네이션)

React Query는 페이지네이션 처리도 간단하게 구현할 수 있습니다. useQuery 훅을 활용해 페이지 번호를 기반으로 데이터를 가져오도록 설정합니다.

function fetchTodos(page) {
  return fetch(`https://jsonplaceholder.typicode.com/todos?_page=${page}`).then(res => res.json());
}

function PaginatedTodos() {
  const [page, setPage] = React.useState(1);
  const { data, isLoading } = useQuery(['todos', page], () => fetchTodos(page));

  if (isLoading) return

Loading...

;

  return (

{data.map(todo => (
• {todo.title}
))}

  );
}

4.2 Optimistic Updates (낙관적 업데이트)

useMutation을 활용해 서버 응답을 기다리지 않고 클라이언트에서 상태를 즉시 업데이트할 수 있습니다.

const mutation = useMutation(updateTodo, {
  onMutate: async (newTodo) => {
    await queryClient.cancelQueries(['todos']);
    const previousTodos = queryClient.getQueryData(['todos']);
    queryClient.setQueryData(['todos'], old =>
      old.map(todo => (todo.id === newTodo.id ? { ...todo, ...newTodo } : todo))
    );
    return { previousTodos };
  },
  onError: (err, newTodo, context) => {
    queryClient.setQueryData(['todos'], context.previousTodos);
  },
});

---

5. 결론

React Query는 서버 상태 관리를 간소화하고 사용자 경험을 개선할 수 있는 강력한 도구입니다. 이 글에서 다룬 기본 사용법과 고급 기능을 활용하면 더욱 효율적으로 React 애플리케이션을 개발할 수 있습니다. React Query를 통해 데이터 패칭과 상태 관리를 최적화해보세요!