✍학습 키워드

상태 관리 , 데이터 패칭 상태 관리

키워드 1

1. useSWR
2. React-Query

📝새로 배운 개념

개념 1

• useQueryClient
  • useQueryClient는 React Query에서 제공하는 훅으로, 쿼리 클라이언트(Query Client)에 접근할 수 있게 해줍니다. 이를 통해 캐시를 직접적으로 조작하거나 쿼리를 무효화하고, 쿼리 상태를 초기화하거나, 데이터를 다시 가져오는 등의 다양한 작업을 할 수 있습니다. useQueryClient는 React Query의 강력한 기능 중 하나로, 데이터 관리와 관련된 다양한 상황에서 유용하게 사용할 수 있습니다.

1. useQueryClient로 캐시 무효화

const InvalidateButton = () => {
    const queryClient = useQueryClient();

    const handleInvalidate = () => {
        queryClient.invalidateQueries('todos');
    };

    return (
        <button onClick={handleInvalidate}>
            Invalidate Todos
        </button>
    );
};

2. useQueryClient로 쿼리 초기화

const ResetButton = () => {
    const queryClient = useQueryClient();

    const handleReset = () => {
        queryClient.resetQueries('todos');
    };

    return (
        <button onClick={handleReset}>
            Reset Todos
        </button>
    );
};

3. useQueryClient로 데이터 직접 설정

const SetDataButton = () => {
  const queryClient = useQueryClient();

  const handleSetData = () => {
    queryClient.setQueryData('todos', oldData => [
      ...oldData,
      { id: oldData.length + 1, title: 'New Todo' }
    ]);
  };

  return (
    <button onClick={handleSetData}>
      Add New Todo
    </button>
  );
};

개념 2

• React Query에서 초기화하는 방법

1. invalidateQueries
   • invalidateQueries는 특정 쿼리를 무효화하고, 이를 통해 데이터를 새롭게 가져오도록 합니다. 주로 데이터가 업데이트된 후 사용됩니다.

import { useQueryClient } from 'react-query';

const queryClient = useQueryClient();

queryClient.invalidateQueries('todos');

2. resetQueries
   • resetQueries는 쿼리의 상태를 초기 상태로 되돌립니다. 주로 에러 상태를 초기화하거나, 쿼리를 재설정할 때 사용됩니다.

import { useQueryClient } from 'react-query';

const queryClient = useQueryClient();

queryClient.resetQueries('todos');

3. refetchQueries
   • refetchQueries는 특정 쿼리를 강제로 다시 가져오도록 합니다. 주로 사용자가 데이터 갱신을 명시적으로 요청할 때 사용됩니다.

import { useQueryClient } from 'react-query';

const queryClient = useQueryClient();

queryClient.refetchQueries('todos');

4. 캐싱 타임과 초기화 관련 설정
   • React Query는 캐싱된 데이터를 얼마나 오래 유지할지 결정하는 다양한 설정을 제공합니다. 이러한 설정을 통해 데이터의 유효성을 관리하고 초기화할 수 있습니다.
     • staleTime: 데이터가 신선한 상태로 유지되는 시간(밀리초)입니다. 이 시간 동안은 재패치가 발생하지 않습니다.
     • cacheTime: 데이터가 캐시에서 보관되는 시간(밀리초)입니다. 이 시간이 지나면 데이터는 가비지 컬렉션에 의해 삭제됩니다.

import { useQuery } from 'react-query';

const fetchTodos = async () => {
  const res = await fetch('/api/todos');
  return res.json();
};

const Todos = () => {
  const { data, error, isLoading } = useQuery('todos', fetchTodos, {
    staleTime: 10000, // 10초 동안 데이터 신선 유지
    cacheTime: 600000, // 10분 동안 캐시 보관
  });

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

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

export default Todos;

개념 3

useSWR과 React Query 비교

useSWR

useSWR은 React에서 데이터 패칭을 위해 설계된 훅입니다. 이 훅은 SWR (Stale-While-Revalidate) 전략을 기반으로 하여 데이터 캐싱, 재검증, 재요청 등을 처리할 수 있습니다. SWR은 Vercel 팀에 의해 개발되었으며, 효율적인 데이터 페칭을 가능하게 하여 사용자 경험을 개선할 수 있습니다.

주요 특징

• 데이터 재검증: 데이터가 변경될 수 있음을 인식하고, 배경에서 자동으로 데이터를 재검증합니다.
• 초기 데이터 사용: 캐시에 저장된 데이터를 즉시 반환하고, 백그라운드에서 데이터를 업데이트하여 사용자에게 보여줍니다.
• 로딩 상태 관리: 데이터 요청의 로딩 상태와 오류를 쉽게 관리할 수 있습니다.

React Query와 useSWR 비교

특징 비교표

차이점 설명

• 데이터 패칭 전략: React Query는 다양한 데이터 패칭 패턴과 더 많은 사용자 설정을 지원합니다. 반면, useSWR은 SWR 패턴에 더 중점을 두어 개발자가 별도의 설정 없이도 빠르게 시작할 수 있게 해줍니다.
• 캐싱과 동기화: React Query는 데이터 캐싱과 동기화에 더 많은 옵션을 제공하며, 복잡한 상황에서 데이터 상태를 효과적으로 관리할 수 있습니다. useSWR은 자동 캐싱과 간편한 설정을 제공합니다.
• 에러 핸들링: React Query는 쿼리 실패 시 자동 재시도와 같은 고급 기능을 제공하여, 복잡한 에러 상황을 관리할 수 있습니다. useSWR은 비교적 간단한 에러 처리를 제공합니다.
• 개발 도구: React Query는 자체 개발 도구를 제공하여 애플리케이션의 상태와 쿼리를 명확하게 파악할 수 있게 합니다. useSWR의 디버깅 도구는 상대적으로 제한적입니다.

✨느낀 점 & 자기 선언

• 비교 하기 (useSWR과 React Query 비교)

  • useSWR: Vercel에서 개발한 데이터 페칭 라이브러리로, 간단함과 사용 용이성에 중점을 둡니다. 빠른 설정과 간단한 데이터 페칭 요구 사항에 적합합니다.
  • React Query: 더 많은 기능과 유연성을 제공하며, 페이징, 캐싱, 백그라운드 업데이트 등과 같은 고급 기능을 필요로 하는 복잡한 애플리케이션에 적합합니다.

• 주요 특징과 차이점

• 캐싱 메커니즘

  • useSWR: 단순한 stale-while-revalidate 전략을 사용하여 캐시된 데이터를 제공하면서 백그라운드에서 다시 유효성을 검사합니다.
  • React Query: 고급 캐싱 전략을 제공하여 캐시 동작을 세밀하게 제어할 수 있습니다. 여러 쿼리를 캐싱하고 쿼리 키를 통해 이를 관리할 수 있습니다.

• 에러 처리

  • useSWR: 간단한 에러 처리 메커니즘을 제공하며, 에러 상태에 대한 세부 제어는 제공하지 않습니다.
  • React Query: 상세한 에러 정보와 에러 재시도 기능을 제공하여 컴포넌트 내에서 에러 상태를 보다 세부적으로 관리할 수 있습니다.

• 성능 최적화

  • useSWR: 경량 성능 최적화에 중점을 두며, 표준 데이터 페칭 패턴을 따르는 간단한 애플리케이션에 적합합니다.
  • React Query: 쿼리 중복 제거, 사전 페칭 등 고급 성능 튜닝 옵션을 제공하여 다양한 데이터 페칭 요구 사항을 가진 복잡한 애플리케이션에 더 적합합니다.

• 개발 도구 및 디버깅

  • useSWR: 간단한 디버깅 접근 방식을 제공하며, 광범위한 개발 도구가 필요하지 않은 프로젝트에 적합합니다.
  • React Query: 캐시, 쿼리 및 변이를 검사할 수 있는 강력한 개발 도구를 제공하여 쿼리 상태와 성능에 대한 통찰을 제공합니다.

• 커뮤니티 및 생태계

  • useSWR: Next.js 개발자들 사이에서 인기를 얻고 있으며, Vercel 및 Next.js 생태계 내에서 강력한 커뮤니티 지원을 받습니다.
  • React Query: 널리 채택되었으며 활발한 커뮤니티를 가지고 있고, 광범위한 리소스와 서드 파티 통합을 제공합니다.

• 선택 기준

  • useSWR는 설정이 간단하고 사용하기 쉬운 솔루션을 찾는 경우 적합합니다. 특히 Next.js와 긴밀하게 통합된 프로젝트에 적합합니다.
  • React Query는 고급 기능이 필요하고, 복잡한 데이터 페칭 및 캐싱 요구 사항을 가진 애플리케이션에 적합합니다. 더 많은 제어와 커스터마이징이 필요한 경우 적합합니다.

🦋활용 사례

활발한 사용 분야

A. useSWR

• useSWR(Stale-While-Revalidate)은 데이터 페칭 라이브러리로, React 애플리케이션에서 클라이언트 측 데이터 가져오기를 쉽게 관리할 수 있도록 도와줍니다. 이 라이브러리는 주로 다음과 같은 분야에서 활발하게 사용됩니다:

1. 정적 사이트 생성(SSG) 및 서버 측 렌더링(SSR)과 함께 사용:
   • Next.js와 같은 프레임워크에서 정적 사이트 생성 또는 서버 측 렌더링과 함께 사용되어, 초기 페이지 로드 시 정적 데이터를 가져온 후 클라이언트 측에서 최신 데이터를 페칭하는 데 활용됩니다.
   • 이는 초기 로딩 속도를 빠르게 하면서도 최신 데이터를 유지할 수 있는 장점을 제공합니다.
2. 실시간 데이터 업데이트가 필요한 애플리케이션:
   • 실시간으로 변동되는 데이터를 처리해야 하는 애플리케이션, 예를 들어 주식 시세, 스포츠 점수, 소셜 미디어 피드 등의 분야에서 매우 유용합니다.
   • useSWR의 자동 재검증 및 폴링 기능을 활용하여 최신 데이터를 유지할 수 있습니다.
3. 캐싱과 데이터 일관성이 중요한 애플리케이션:
   • 데이터 일관성을 유지하면서도 성능 최적화가 필요한 애플리케이션에서 사용됩니다.
   • useSWR은 캐싱 메커니즘을 내장하고 있어, 동일한 데이터를 여러 컴포넌트에서 재사용할 때 유용합니다.
4. 사용자 인터페이스(UI) 개선:
   • 사용자 경험을 개선하기 위해 빠른 응답이 필요한 경우에 사용됩니다.
   • useSWR은 비동기 데이터를 페칭하는 동안의 로딩 상태를 관리하고, stale 데이터와 최신 데이터를 효과적으로 교체하여 부드러운 사용자 경험을 제공합니다.
5. API 연동:
   • 다양한 외부 API와 연동하여 데이터를 가져와야 하는 애플리케이션에서 많이 사용됩니다.
   • 예를 들어, RESTful API, GraphQL API, Firebase 등과 쉽게 통합할 수 있습니다.

B. React_Query

• React Query는 클라이언트 측 데이터 페칭, 캐싱, 동기화 및 서버 상태 관리를 위한 강력한 라이브러리입니다. 주로 다음과 같은 경우에 사용됩니다:

1. 데이터 페칭과 캐싱이 중요한 애플리케이션:
   • React Query는 서버 상태를 클라이언트 측에서 쉽게 관리할 수 있게 해줍니다. 자동으로 데이터 페칭, 캐싱, 동기화 및 업데이트를 처리하여, 최신 데이터를 유지할 수 있습니다.
   • API 요청을 캐싱하여 동일한 데이터를 여러 컴포넌트에서 재사용할 수 있습니다.
2. 비동기 데이터 처리:
   • 여러 비동기 데이터 요청을 효율적으로 처리하고, 로딩 상태, 에러 상태, 성공 상태를 관리할 때 유용합니다.
   • useQuery와 useMutation 훅을 사용하여 데이터를 가져오고 조작하는 작업을 쉽게 관리할 수 있습니다.
3. 리액티브하게 데이터를 업데이트해야 하는 경우:
   • 실시간으로 데이터가 변경되는 애플리케이션에서, React Query는 데이터를 자동으로 업데이트하고, 변경 사항을 반영하여 UI를 업데이트합니다.
   • 예를 들어, 실시간 채팅 애플리케이션이나 주식 시세와 같은 애플리케이션에서 매우 유용합니다.
4. 복잡한 데이터 의존성 관리:
   • 데이터 페칭과 관련된 복잡한 의존성을 쉽게 관리할 수 있습니다. 여러 쿼리가 서로 의존적일 때, React Query는 이러한 의존성을 처리하여 올바른 순서로 데이터를 가져올 수 있게 합니다.
   • useQuery 훅을 통해 데이터 페칭의 의존성을 명확하게 정의할 수 있습니다.
5. 오프라인 지원:
   • React Query는 오프라인 모드를 지원하여, 네트워크 연결이 끊어졌을 때도 데이터를 관리할 수 있습니다.
   • 오프라인에서 데이터를 캐싱하고, 네트워크가 다시 연결되면 자동으로 동기화합니다.

🔗레퍼런스

참고 강의/글

• https://swr.vercel.app/ko
• https://tanstack.com/query/latest/docs/framework/react/overview

읽을 예정

• https://codedamn.com/news/javascript/useswr-vs-react-query-differences-and-which-one-should-you-choose
• https://www.mdfaisal.com/blog/react-query-vs-swr
• https://www.basedash.com/blog/react-query-vs-swr
• https://github.com/ssi02014/react-query-tutorial