Written by Nostrss
on December 11, 2022

[월간코딩] #3 React-Query

React Query란?

클라이언트 상태관리 : redux, recoil 등
서버 상태관리 : react-query

단순이 이렇게 알고 있었다. 그런데 공식문서를 보면서 오늘 써보니 이게 왠걸?

조금 더 공부해야겠지만 api 통신의 관리가 이렇게 쉽게 되는 건가 싶었다.

axios로 통신을 하고 난 뒤에 로딩중인지, 로딩이 끝나면 then으로 무엇을 할지, 데이터 새로고침을 일일이

내가 다 만들어줘야 했는데 이런 걸 전부 제공한다. 😍😍😍 첫날이지만 마음에 쏙드는 라이브러리이다.

여기에 무한스크롤, 페이지네이션을 돕는 기능과 Optimistic update 기능도 있는 것 같다. 나중에 꼭 사용해 봐야겠다.

대체적으로 사용법은 마치 예전에 Apollo Client로 gql을 쓸때와 비슷한 느낌이다.

QueryClientProvider 설정하기

// index.tsx 파일
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

const queryClient = new QueryClient();

root.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <QueryClientProvider client={queryClient}>
        <Layout>
          <App />
        </Layout>
      </QueryClientProvider>
    </ThemeProvider>
  </React.StrictMode>
);

useQuery 사용법

api를 get할 떄 사용한다.

import useQuery

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

Query Functions

Query Functions 공식문서

useQuery({
  queryKey : ['쿼리키'],
  queryFn : fetch 정보를 불러올 함수
})

응답값의 종류

data : fetch로 받은 정보
isLoading : 통신 완료 값, then 또는 status 200으로 생각하면 될듯
refetch : 동일한 쿼리키의 useQuery를 재실행하는 함수

나머지는 공식 문서에서 더 공부해보자

예시

나는 아래와 같이 사용했고 결과 값을 구조분해 할당하여 memoLists, isFetching, refetch로 담아 사용했다.

import { useQuery } from '@tanstack/react-query';
import { loadMemoList } from 'common/util';
import { firebaseDb } from 'App';

const {
  data: memoLists,
  isLoading: isFetching,
  refetch,
} = useQuery({
  queryKey: ['fetchdata'],
  queryFn: async () => loadMemoList(firebaseDb, 'no-sign-in'),
});

useMutation 사용법

mutation은 사용법에서 조금 헤멨다. 아직도 조금 헷갈리는 부분이 있는데 이해한 부분까지 정리를 해보면 아래와 같다.

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

const { mutate } = useMutation({
  mutationFn: Mutaion함수,
});

위와 같이 mutate를 선언해주고 아래처럼 버튼 등에 바인딩 해서 사용하면 된다.

<button
  onClick={() => {
    mutate({ id: new Date(), title: 'Do Laundry' })
    }}
    >

실제 사용한 코드

interface INewTite {
  text: string;
  createdAt: any;
}

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

export default function SideBar() {

  const { mutate: createTitle, isLoading: isMutating } = useMutation(
    (newTitle: INewTite) => {
      return addDoc(collection(firebaseDb, 'no-sign-in'), newTitle);
    }
  );

  const onSubmitMemoTitle = async (event: React.SyntheticEvent) => {
    event.preventDefault();
    const memoObj = {
      text: memoTitle,
      createdAt: serverTimestamp(),
    };

    createTitle(memoObj);
    refetch(); // useQuery로 받아온 refetch 함수이다.
    setMemoTitle('');
  };
.
}

몇 시간 안써봤지만 당장 회사에서도 쓸 수 있으면 좋겠다…라는 마음이 들게 하는 라이브러리이다.

← → Top