리액트 데이터 패칭 라이브러리 개념 정리 및 비교 (React Query,SWR,Redux-sagas,thunk)

React Query (데이터 패칭)

데이터 페칭과 관련된 상태 관리와 로직을 효과적으로 처리하기 위한 라이브러리이다.

리덕스나 mobx와 같이 상태관리보다는 비동기 데이터 처리에 관해 주요 기능을 한다.

API 호출, 캐싱, 리프레싱 등을 간단한 API를 통해 처리할 수 있으며, 컴포넌트의 데이터 요구사항을 관리하는 데 도움을 준다.

import React from 'react';
import { useQuery } from 'react-query';

function UserProfile() {
  // useQuery 훅을 사용하여 데이터 페칭 처리
  const { data, isLoading, error } = useQuery('userData', fetchUserData);

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>User Profile</h1>
      <p>Name: {data.name}</p>
      <p>Email: {data.email}</p>
    </div>
  );
}

// 가상의 API 호출 함수
async function fetchUserData() {
  const response = await fetch('https://api.example.com/user');
  if (!response.ok) throw new Error('Network error');
  return response.json();
}

export default UserProfile;

useQuery 훅을 사용하여 데이터를 페칭하고 관리한다.

useQuery('userData', fetchUserData)는 'userData'라는 고유한 쿼리 키를 가진 데이터 페칭을 수행한다.

fetchUserData 함수는 가상의 API 호출을 나타내며,

useQuery는 데이터 페칭 상태와 결과를 관리하면서 자동으로 캐싱 및 리프레시를 처리한다.

 

data는 API 호출 결과를 나타내며, isLoading은 데이터 로딩 중인지 여부, error는 에러 발생 여부를 나타낸다.

useQuery는 데이터를 캐싱하고, 데이터가 유효하지 않을 때 자동으로 리프레시한다.

React Query는 이외에도 여러 기능을 제공하며, 데이터 요청, 캐싱, 재시도, 리프레시 등을 편리하게 다룰 수 있도록 도와준다.

데이터 로직을 더 효율적으로 처리하고 UI 상태 관리를 간소화할 수 있는 강력한 도구이다.

 

 

 

SWR(데이터 패칭)

데이터 패칭과 상태 관리를 위한 라이브러리이며 캐싱, 실시간 업데이트 및 상태 관리를 쉽게 처리할 수 있다

 

import React from 'react';
import useSWR from 'swr';

const fetcher = async (url) => {
  const response = await fetch(url);
  const data = await response.json();
  return data;
};

const ExampleComponent = () => {
  const { data, error } = useSWR('/api/data', fetcher);

  if (error) return <div>에러 발생: {error.message}</div>;
  if (!data) return <div>데이터 로딩 중...</div>;

  return (
    <div>
      <h1>데이터: {data.message}</h1>
    </div>
  );
};

export default ExampleComponent;

useSWR는 첫 번째 인자로 패칭할 URL을 받고, 두 번째 인자로 데이터를 가져오는 함수(fetcher)를 전달받는다.

data는 패칭한 데이터가 저장되는 변수이다.

error는 패칭 중에 발생한 에러를 저장하는 변수이다.

fetcher 함수는 주어진 URL로 패칭을 수행하고, 데이터를 비동기적으로 가져온다.

이 예시에서 SWR은 데이터를 패칭하고, 패칭이 완료되면 데이터를 화면에 렌더링한다.

패칭 중에 에러가 발생하면 에러 메시지를 표시하며, 데이터를 아직 가져오지 않았을 경우 "데이터 로딩 중..."을 표시한다.

SWR은 캐싱과 리퀘스트 중복을 자동으로 관리하여 최적의 사용자 경험을 제공한다.

 

 

React Query와 SWR 비교

공통점

비동기 데이터 패칭: 둘 다 비동기 데이터 패칭을 쉽게 다루는 데 사용된다.
캐싱 및 상태 관리: 데이터를 캐싱하고 상태를 관리하여 화면 갱신과 최적의 사용자 경험을 제공한다.
실시간 업데이트: 실시간 데이터 업데이트와 캐싱을 지원하여 데이터 변경 시 화면을 자동으로 갱신한다.
간편한 사용법: 각각의 라이브러리는 간단한 API를 제공하여 사용자 친화적으로 설계되었다.

 

차이점

1.API 설계 및 컨셉:
React Query: useQuery, useMutation과 같은 훅을 통해 데이터 패칭과 데이터 갱신을 다루는데 중점을 두고 있으며 자동으로 리패칭 및 데이터 업데이트를 처리합니다.

SWR: useSWR 훅을 통해 데이터 패칭 및 데이터 캐싱에 초점을 맞추고 있으며, 상태 갱신에 대한 조작을 사용자가 더 직접적으로 다룬다.

2. 리패칭 및 자동 갱신:
React Query: 내부적으로 리패칭 주기 및 자동 갱신 기능을 지원하여 데이터 업데이트를 자동으로 관리한다.
SWR: 설정을 통해 리패칭 주기를 조정하고, 사용자가 직접 데이터를 다시 패치하는 방식으로 갱신을 다룬다.

 

3. 실시간 업데이트:
React Query: Query : 결과를 캐싱하고 서버에서 새로운 데이터가 오면 자동으로 업데이트됩니다.
SWR: 특별한 처리 없이도 실시간 업데이트를 지원한다.

4. 라이브러리 크기:
React Query: 상대적으로 더 많은 기능과 복잡성을 제공하는 대신, 더 큰 번들 사이즈를 가질 수 있다.
SWR: 더 경량이면서도 간단한 API를 제공하며, 작은 프로젝트에 더 적합할 수 있다.

 

우선 SWR과 ReactQuery를 둘다 사용해서 사이드 프로젝트를 진행해 보고 결정 해보자 !

 

 

 

 

 

Redux-sagas,thunk

차후 공부 예정