6/12 TIL

TanStack Query와 SWR

1. TanStack Query란?

• TanStack Query(구 React Query)는 서버 상태 관리 라이브러리로, React 애플리케이션에서 비동기 데이터를 쉽게 가져오고, 캐싱하고, 동기화할 수 있게 해줍니다.
• 백그라운드에서 데이터 패칭을 수행하고, 캐싱된 데이터를 활용하여 사용자 경험을 향상시킵니다.

2. 기본 사용법

• useQuery 훅을 사용하여 데이터를 가져올 수 있습니다.
• queryKey와 queryFn을 인자로 받아 데이터를 패칭합니다.

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

const fetchData = async () => {
  const { data } = await axios.get('/api/data');
  return data;
};

const MyComponent = () => {
  const { data, error, isLoading } = useQuery('dataKey', fetchData);

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

  return <div>{data}</div>;
};

3. SWR

• SWR은 Vercel에서 만든 데이터 패칭 라이브러리로, TanStack Query와 비슷한 역할을 합니다.
• SWR은 "stale-while-revalidate" 전략을 사용하여 빠르고 최신의 데이터를 제공합니다.

import useSWR from 'swr';
import axios from 'axios';

const fetcher = url => axios.get(url).then(res => res.data);

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

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

  return <div>{data}</div>;
};

4. LifeCycle의 동작 원리

• TanStack Query는 데이터를 패칭할 때 다양한 라이프사이클 이벤트를 제공합니다.
  • isLoading: 데이터 패칭 중
  • isSuccess: 데이터 패칭 성공
  • isError: 데이터 패칭 실패
  • isFetching: 데이터 재패칭 중

5. Infinite Query

• 무한 스크롤과 같은 기능을 구현할 때 유용한 훅입니다.
• useInfiniteQuery를 사용하여 데이터를 페이지 단위로 패칭합니다.

import { useInfiniteQuery } from 'react-query';
import axios from 'axios';

const fetchInfiniteData = async ({ pageParam = 1 }) => {
  const { data } = await axios.get(`/api/data?page=${pageParam}`);
  return data;
};

const MyComponent = () => {
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
  } = useInfiniteQuery('infiniteData', fetchInfiniteData, {
    getNextPageParam: (lastPage, pages) => lastPage.nextPage ?? false,
  });

  return (
    <div>
      {data.pages.map(page => (
        <div key={page.id}>{page.content}</div>
      ))}
      <button
        onClick={() => fetchNextPage()}
        disabled={!hasNextPage || isFetchingNextPage}
      >
        {isFetchingNextPage ? 'Loading more...' : hasNextPage ? 'Load More' : 'No More Data'}
      </button>
    </div>
  );
};

주스탠드와 Immer, Persist

1. 주스탠드

• Zustand는 가벼운 상태 관리 라이브러리로, React 애플리케이션에서 전역 상태를 쉽게 관리할 수 있게 해줍니다.
• 사용법이 간단하며, Immer와 같은 라이브러리와 함께 사용하면 상태 업데이트가 매우 직관적입니다.

2. Immer

• Immer는 불변성을 유지하면서 상태를 쉽게 업데이트할 수 있게 도와주는 라이브러리입니다.
• produce 함수를 사용하여 상태를 업데이트합니다.

import produce from 'immer';

const nextState = produce(state, draft => {
  draft.value = newValue;
});

3. Persist

• Zustand의 Persist 미들웨어를 사용하면 상태를 로컬 스토리지에 저장하고, 애플리케이션이 다시 로드될 때 상태를 복원할 수 있습니다.

import create from 'zustand';
import { persist } from 'zustand/middleware';

const useStore = create(persist(
  (set) => ({
    value: 0,
    increment: () => set((state) => ({ value: state.value + 1 })),
  }),
  { name: 'my-store' }
));

---

오늘 배운 내용을 통해 TanStack Query와 SWR을 활용한 비동기 데이터 패칭 방법을 익혔고, Zustand를 사용한 상태 관리를 이해하게 되었습니다. 특히, Immer를 사용하여 불변성을 유지하면서 상태를 쉽게 업데이트하는 방법과 Persist를 사용하여 상태를 로컬 스토리지에 저장하고 복원하는 방법을 배웠습니다. 이를 통해 더 효율적이고 유지보수하기 쉬운 코드를 작성할 수 있게 되었습니다.