React에서 서버 상태 관리하기

 

 

React 애플리케이션을 개발할 때 상태 관리는 필수적입니다. 하지만 대부분의 개발자는 클라이언트 상태만을 신경 쓰고, 서버에서 가져온 데이터(서버 상태)의 관리는 종종 간과합니다. 서버 상태는 데이터의 신뢰성, 실시간 업데이트, 그리고 성능에 큰 영향을 미치므로 이를 효율적으로 관리하는 것이 중요합니다.

이번 포스팅에서는 React에서 서버 상태를 관리하는 개념과 방법들을 자세히 살펴보겠습니다. 특히 React Query와 같은 도구를 활용하여 실전에서 쉽게 서버 상태를 다룰 수 있는 방법에 대해 다루겠습니다.

---

1. 서버 상태란 무엇인가?

클라이언트 상태와 서버 상태의 차이점

1. 클라이언트 상태
   • 사용자의 입력값, UI 상태, 폼 데이터 등 로컬에서 관리하는 상태입니다.
   • 예시: useState, useReducer로 관리하는 상태
2. 서버 상태
   • 서버에서 가져오는 데이터(REST API, GraphQL 등)로, 외부 데이터를 의미합니다.
   • 예시: 서버에서 fetch를 통해 가져온 사용자 정보, 상품 목록 등

서버 상태의 주요 특징

• 데이터는 원격 서버에 저장되어 있습니다.
• 비동기적으로 가져오고 업데이트해야 합니다.
• 데이터는 다른 클라이언트에서도 변경될 수 있습니다.
• 캐싱, 동기화, 리페칭 등의 관리가 필요합니다.

---

2. 서버 상태 관리를 어려운 이유

서버 상태를 관리할 때 발생하는 어려움은 다음과 같습니다.

1. 비동기 데이터 처리
   • 네트워크 요청의 결과를 처리하는 동안 로딩 상태, 에러 상태를 명확히 관리해야 합니다.
2. 데이터 캐싱
   • 서버에서 데이터를 매번 가져오면 성능이 저하되므로, 캐싱을 통해 효율적으로 관리해야 합니다.
3. 동기화와 실시간 업데이트
   • 서버 데이터는 여러 클라이언트에서 변경될 수 있어 동기화가 필요합니다.
4. 중복 요청 방지
   • 동일한 요청을 여러 번 보내는 것을 방지해야 합니다.

이런 문제를 해결하기 위해 React 생태계에서는 React Query, SWR, Redux Toolkit Query 같은 라이브러리를 제공하고 있습니다.

---

3. React Query를 활용한 서버 상태 관리

React Query는 서버 상태 관리를 효율적으로 돕는 라이브러리로, 데이터 페칭, 캐싱, 동기화를 쉽게 처리할 수 있습니다. React Query를 사용하면 비동기 데이터 관리를 단순화하고 성능을 최적화할 수 있습니다.

React Query 주요 기능

1. 자동 캐싱: 가져온 데이터를 자동으로 캐싱하여 중복 요청을 방지합니다.
2. 리페칭 및 데이터 동기화: 데이터 변경 시 자동으로 최신 데이터를 동기화합니다.
3. 로딩 및 에러 상태 관리: 로딩 중, 에러 발생 상태를 별도 관리할 필요 없이 자동으로 처리됩니다.
4. 백그라운드 리페칭: 앱의 성능을 저하시키지 않으면서 데이터를 백그라운드에서 가져옵니다.

---

React Query 설치 및 설정

먼저 React Query를 설치합니다.

npm install @tanstack/react-query

React Query를 사용하기 위해 QueryClient를 설정하고 QueryClientProvider로 앱을 감싸줍니다.

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

// QueryClient 생성
const queryClient = new QueryClient();

const Root = () => (
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
);

export default Root;

---

데이터 페칭 예제

React Query를 사용해 서버에서 데이터를 가져오는 예제입니다.

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

// 데이터 페칭 함수
const fetchUsers = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

const UserList = () => {
  const { data, isLoading, isError, error } = useQuery({
    queryKey: ['users'], // 캐싱 및 리페칭을 위한 키
    queryFn: fetchUsers, // 데이터 페칭 함수
  });

  if (isLoading) return

Loading...

;
  if (isError) return

Error: {error.message}

;

  return (

{data.map((user) => (
• {user.name}
))}

  );
};

export default UserList;

코드 설명

1. useQuery: 서버 상태를 가져오는 훅입니다.
   • queryKey: 캐시를 식별하는 고유 키입니다.
   • queryFn: 데이터를 가져오는 함수입니다.
2. 로딩과 에러 처리:
   • isLoading: 데이터 로딩 중인 상태
   • isError: 에러 발생 상태
3. 자동 캐싱과 리페칭:
   • React Query는 동일한 queryKey로 요청 시 캐싱된 데이터를 사용합니다.
   • 데이터 변경이 감지되면 자동으로 리페칭합니다.

---

4. React Query의 고급 기능

1) 데이터 무효화(Invalidation)와 리페칭

데이터가 변경되었을 때 캐시를 무효화하고 최신 데이터를 가져올 수 있습니다.

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

const queryClient = useQueryClient();

const mutation = useMutation({
  mutationFn: updateUserData, // 데이터 업데이트 함수
  onSuccess: () => {
    queryClient.invalidateQueries(['users']); // 'users' 캐시를 무효화
  },
});

2) Pagination(페이지네이션)

React Query는 페이지네이션도 간단하게 지원합니다.

const { data } = useQuery({
  queryKey: ['users', page],
  queryFn: () => fetchUsersByPage(page),
});

---

5. 결론: React Query를 활용해 서버 상태를 효율적으로 관리하자

React에서 서버 상태를 제대로 관리하면 앱의 성능과 사용자 경험이 크게 향상됩니다. 특히 React Query를 사용하면 비동기 데이터 처리, 캐싱, 리페칭 등을 자동화하여 복잡한 로직을 줄일 수 있습니다.

React Query 사용 시 얻는 이점

1. 로딩 및 에러 상태 자동 관리
2. 중복 요청 방지 및 성능 최적화
3. 최신 데이터 자동 동기화

React 애플리케이션에서 서버 상태를 효율적으로 관리하고 싶다면 React Query를 꼭 활용해 보세요. 이를 통해 코드의 가독성과 유지보수성을 높이고 개발 시간을 크게 단축할 수 있습니다.

여러분은 React에서 서버 상태 관리를 어떻게 하고 계신가요? React Query를 사용해 본 경험이나 궁금한 점을 댓글로 남겨주세요! 😊