[React] React Query: 데이터를 사랑하는 리액트 개발자의 필수템 💖

React Query 톺아보기! 💖

React 애플리케이션에서 데이터를 다루는 일은 매일의 숙명 같은 일이죠. 데이터를 가져오고, 상태를 관리하고, 캐싱하고, 갱신하는 것만으로도 머리가 아플 때가 많습니다. 그런데 이런 반복되는 작업을 “깔끔하게” 처리해주는 친구가 있습니다. 바로 React Query! 🎉

 

React Query는 클라이언트 상태와 서버 상태를 깔끔하게 관리해주는 라이브러리로, 데이터를 가져오는 API 통신의 복잡성을 크게 줄여줍니다. 오늘은 React Query의 강력한 기능과 활용 방법을 낱낱이 파헤쳐 볼게요.

---

🌟 React Query란?

React Query는 서버 상태 관리를 위한 라이브러리로, 다음과 같은 기능들을 제공합니다:

1. 데이터 fetching: 데이터를 가져오고 캐싱합니다.
2. 자동 갱신: 데이터를 자동으로 새로고침합니다.
3. 오류 관리: 요청이 실패했을 때 재시도 로직을 제공합니다.
4. 캐싱: 동일한 요청에 대해 캐시를 제공해 네트워크 부담을 줄입니다.
5. 상태 관리 통합: 로딩 상태, 성공 여부, 오류 메시지를 간단히 관리할 수 있습니다.

React Query를 사용하면, “데이터 로딩 -> 로딩 상태 관리 -> 성공 및 실패 처리”라는 전형적인 데이터 흐름을 더 간단하고 효율적으로 구현할 수 있습니다.

---

🚀 React Query의 주요 특징

1. 자동 캐싱

React Query는 데이터를 요청할 때 자동으로 캐시합니다. 동일한 데이터를 다시 요청하면 캐시된 데이터를 사용하기 때문에 네트워크 요청을 최소화할 수 있습니다.

 

2. 자동 리페치(Auto Refetch)

데이터가 변경되었을 때(탭 포커스, 네트워크 재연결 등), React Query는 자동으로 데이터를 새로고침합니다.

 

3. 쿼리 재시도

네트워크 요청이 실패하면 기본적으로 3번 재시도하며, 재시도 간격도 설정할 수 있습니다.

 

4. 서버 상태 관리

React Query는 서버 상태와 클라이언트 상태를 명확히 구분하여 관리합니다. Redux나 MobX 같은 전역 상태 관리 라이브러리와도 쉽게 통합할 수 있습니다.

---

⛲️ 설치 방법

React Query를 설치하려면 아래 명령어를 사용하세요:

npm install @tanstack/react-query
npm install @tanstack/react-query-devtools

 

React Query의 개발 도구도 함께 설치하면 디버깅이 훨씬 편리해집니다. DevTools를 통해 쿼리 상태를 실시간으로 확인할 수 있어요.

---

🛸 기본 사용법

1. React Query 클라이언트 설정

먼저, 애플리케이션 최상위에 QueryClientProvider를 추가해야 합니다.

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

const queryClient = new QueryClient();

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

export default App;

 

2. 데이터 fetching 예제

useQuery 훅을 사용하면 데이터를 가져오고, 로딩 상태와 오류를 간단히 관리할 수 있습니다.

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

function MyComponent() {
  const { data, isLoading, isError } = useQuery(["todos"], fetchTodos);

  if (isLoading) return <p>Loading...</p>;
  if (isError) return <p>Error occurred!</p>;

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

async function fetchTodos() {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos");
  if (!response.ok) throw new Error("Network response was not ok");
  return response.json();
}

---

🏄🏻‍♀️ React Query의 상태와 라이프사이클

React Query는 데이터의 상태를 크게 3가지로 구분합니다:

1. isLoading: 데이터를 처음 가져오는 상태.
2. isError: 요청이 실패한 상태.
3. isSuccess: 데이터가 성공적으로 가져와진 상태.

이 외에도 isFetching(백그라운드 데이터 갱신), isIdle(쿼리가 실행되지 않은 상태) 등의 상태를 제공합니다.

---

🧗🏻‍♀️ React Query의 고급 기능

1. 쿼리 무효화(Query Invalidations)

데이터를 업데이트한 후 기존 쿼리를 무효화하여 최신 데이터를 가져올 수 있습니다.

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

function AddTodo() {
  const queryClient = useQueryClient();
  const mutation = useMutation(addTodo, {
    onSuccess: () => {
      queryClient.invalidateQueries(["todos"]); // todos 쿼리 무효화
    },
  });

  return (
    <button onClick={() => mutation.mutate({ title: "New Todo" })}>
      Add Todo
    </button>
  );
}

 

2. Optimistic Update

사용자 인터페이스를 더 빠르게 반응하도록 만들어줍니다.

const mutation = useMutation(addTodo, {
  onMutate: async (newTodo) => {
    await queryClient.cancelQueries(["todos"]);
    const previousTodos = queryClient.getQueryData(["todos"]);
    queryClient.setQueryData(["todos"], (old) => [...old, newTodo]);
    return { previousTodos };
  },

  onError: (err, newTodo, context) => {
    queryClient.setQueryData(["todos"], context.previousTodos);
  },

  onSettled: () => {
    queryClient.invalidateQueries(["todos"]);
  },
});

 

3. React Query DevTools

개발 도구를 사용하면 쿼리의 상태와 데이터를 실시간으로 확인할 수 있습니다.

import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

<QueryClientProvider client={queryClient}>
  <App />
  <ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>;

---

⚠️ React Query를 사용할 때 주의할 점

1. 캐시 시간과 갱신 전략을 적절히 설정

캐시가 오래 유지되면 오래된 데이터를 보여줄 수 있고, 너무 자주 갱신하면 네트워크 비용이 증가할 수 있습니다.

 

2. 데이터의 의존성 관리

쿼리 키를 명확히 설정하여, 의도하지 않은 데이터 갱신을 방지하세요.

 

3. 백엔드와 협력 필요

React Query는 클라이언트 측 라이브러리이므로, 효율적인 API 설계가 함께 필요합니다.

---

🔖 결론

React Query는 복잡한 서버 상태 관리를 간단하게 만들어주는 훌륭한 도구입니다.

데이터 fetching, 캐싱, 갱신까지 한 번에 처리하니, 여러분의 애플리케이션이 더 효율적으로 동작하게 될 거예요. 처음엔 조금 낯설 수 있지만, 한 번 익숙해지면 돌아가기 힘들 거랍니다. 😎

 

🌷전설의 개발자가 되어봅시당!🌷