아직도 React-Query를 안쓴다고??

박상현·2023년 3월 17일

React react-query typescript useMutation usequery

front-end

목록 보기

1/2

두 번째 글이다.

암튼, 프로젝트를 하면서 React-Query를 사용하여 개발하게 되었다.

처음에 React-Query를 사용할 때는 이해가 잘 되지 않았지만 계속 쓰다보니
더 이상 React-Query 없이는 살 수 없는 몸이 되버렸다.

그래서 React-Query를 쓰는 법을 알려주도록 하겠다.

React-Query란??

데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게
만들어 주는 React 라이브러리이다.

진짜 사기다.

쉽게 설명하기 위해 예시를 들면,
useEffect로는 페이지가 렌더링될 때마다 서버로 요청을 보내서 사용을 한다면
React-Query는 서버에게 요청을 보낸 뒤 받은 리스폰 값을 캐싱하여 사용을 한다. 그리고 캐싱된 데이터가 만료되면 자동으로 요청을 보내 새로운 데이터를 가져온다.

리액트로 개발을 하는 사람에겐 정말 매력적인 라이브러리이다.

그래서 어케 사용함??

React-Query에서 가장 많이 사용하는 함수와 사용법을 알려주겠다.

$ yarn add react-query

위 코드로 React-Query를 설치한다.
난 yarn을 사용하기 때문에 yarn으로 깔겠다.

설치를 했다면

/* index.tsx */

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

ReactDOM.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>,
  document.getElementById('root')
);
reportWebVitals();

index 파일에 QueryClientProvider 태그를 감싸준다.
이제 React-Query에서 사용되는 함수를 알려주겠다.

useQuery

useQuery는 데이터를 get할 때 쓰는 함수이다.
아래 형식으로 데이터를 받아온다.

useQuery("키값",api 호출 함수,{쿼리옵션})

키값은 자기가 원하는 걸 넣어도 된다.
~~케바케이긴 하지만 난 api를 키값으로 넣는다.~~

쿼리옵션

쿼리옵션은 자기가 원하는 형식으로 데이터를 받을 수 있도록 옵션을 지정할 수 있다. 예를 들면 캐싱한 데이터를 얼마나 유지를 할건가, 특정값이 바뀔때마다 서버한데 요청할 것인가 같은 다양한 옵션이 존재한다.

이렇게 짠 코드를 선언하는 방법은

export const useGetList = () => 
 useQuery("키값",api 호출 함수,{쿼리옵션})

const { data } = useGetList();

끝이다. 진짜 이건 혁명이다.

useMutation

useMutaion은 데이터를 delete, patch, post할 때 쓰는 함수이다.

const mutation = useMutation(()=>api 호출함수(매개변수))

코드를 사용하는 방법은 아래처럼 함수로 만든 뒤,

export const usePatchMyListMutation = () => {
  const mutation = useMutation(()=>api 호출함수(매개변수))
  return mutation
}

사용하는 방법은 아래처럼 사용한다.

const patchMyList = usePatchMyListMutation();

patchMyList.mutate(매개변수,{
	onSuccess: () => {},
    onError: () => {},
    onSettled: () => {},
})

onSuccess, onError, onSettled를 주로 쓴다.

onSuccess는 요청 성공했을 때 실행하는 함수이다.
onError는 요청 실패했을 때 실행하는 함수이다.
onSettled는 요청 성공,실패에 관계없이 실행하는 함수이다.

마지막으로 useMutation을 사용할 때는 쿼리무효화란 것을 해줘야한다.

쿼리무효화

최신데이터로 업데이트하기 위해 사용한다.

useMutation과 같이 사용하는데 주의할 점이 있다.

예시를 들어 설명하자면, useQuery로 get한 게시글이 있다고 가정하자.
그 게시글의 키값은 “/get/list”이다.

그리고 get한 게시글을 수정, 삭제, 업데이트를 할려고한다. 그 때 useMutation 코드를 짜고 아래 코드처럼 customHooks를 만들려한다.

export const handlePatchClick = () => {
  const patchMyList = usePatchMyListMutation();
  const queryClient = useQueryClient();

  patchMyList.muatate({name:"도한",age:18}, {
    onSuccess: () => {
	  window.alert("수정을 하였습니다.");
      queryClient.invalidateQueries('/get/list');
    },
  });

	return { editList };
};