[React] 리액트 쿼리(React-Query) 사용 방법

[React] TanStack Query(리액트 쿼리) V5

현재 게시물보다 위에 게시물 추천

 

 

시작하며...

지난 동아리 프로젝트때 React-Query + recoil 조합으로 개발을 하였다.

그래서 간단하게 React-Query를 활용해서 api 데이터를 요청하고 보내는 방법에 대해 설명하기 위해 글을 작성하기로 했다.

(React-Query를 사용했던 경험으로 글을 작성하는 거라서 자세한 내용은 공식 문서에)

TanStack Query | React Query, Solid Query, Svelte Query, Vue Query

---

React-Query란?

react-query는 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 보다 쉽게 다룰 수 있도록 도와주는 라이브러리이다.

 

React-Query 사용하는 이유

그렇다면 요즘 왜 React Query 를 사용할까?

React Query를 사용하는 이유는 아래 게시물에서 확인할 수 있다.

카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유 | 카카오페이 기술 블로그

 

 

React-Query 사용법

React-Query 설치

React 프로젝트를 하나 생성한 후에, React Query 를 설치한다.

npm install react-query

 

그리고 index.js 에서 provider를 사용해 프로젝트 코드를 감싸주어, 내 프로젝트에서 React Query를 사용할 수 있게 한다.

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

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

const queryClient = new QueryClient();

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

...

여기까지 했으면 이제 React Query를 사용할 준비는 끝났다

 

그 외 설정 사항

HTTP GET과 POST 요청을 직접 하기 위해 가상 Rest API 서버인 JSONPlaceholder를 사용할 것이다.

JSONPlaceholder - Free Fake REST API

해당 사이트에서 GET 요청인 /posts 와 /posts/1 을 요청하고, POST 요청인 /posts 를 해볼 것이다.

 

그리고 데이터를 요청할 때, 자바스크립트에 기본적으로 내장되어 있는 fetch를 사용해도 괜찮지만,

나는 axios를 사용하여 데이터를 요청할 것이다.

 

axios 설치

npm install axios

axios를 사용하는 이유는 간단하게 말하면

fetch보다 브라우저 호환성이 높고, 비동기적 작업을 효율적으로 수행할 수 있고, HTTP 요청 코드를 쉽고 간결하고 사용할 수 있고 기능이 더 많기 때문이다. 

 

React-Query 로 GET 요청

HTTP GET 요청을 하기 위해 axios로 api를 요청하는 코드를 만들어 준다.

...
import axios from 'axios';

// HTTP GET 요청을 통해 게시물 데이터 한 개 가져옴
const fetchData = async () => {
  try {
    const res = await axios.get("https://jsonplaceholder.typicode.com/posts/1");
    return res.data;
  } catch (error) {
    throw new Error("Failed to fetch data");
  }
};

// HTTP GET 요청을 통해 게시물 리스트 데이터 가져옴
const fetchListData = async () => {
  try {
    const res = await axios.get("https://jsonplaceholder.typicode.com/posts");
    return res.data;
  } catch (error) {
    throw new Error("Failed to fetch data");
  }
};
...

GET 요청에 대한 데이터를 관리해주기 위해 React Query에서 제공하는 useQuery를 사용한다.

import { useQuery } from 'react-query';

 

 

사용 방법 1

아래 코드와 같이 작성하며

useQuery의 첫 번째 파라미터에는 원하는 unique key 값을 넣어주고, 

두 번째 파라미터에는 사용자가 호출하고자 하는 비동기 함수를 넣어준다.

// 게시물 데이터 1개
const [post, setPost] = useState(null);
useQuery("post",fetchData,{
  onSuccess: (data) => setPost(data),
  onError: (error) => {
    console.error("에러",error);
    setPost({title: "제목 없음", body: "내용 없음"});
  }
})

비동기 함수 요청이 성공하면 onSuccess, 실패하면 onError로 가게 되어 데이터 요청에 대한 상태관리를 손쉽게 할 수 있다.

post 데이터를 화면에 그려주어 성공했을 땐, 이렇게 데이터가 보이고

실패 했을 땐, 에러가 뜨게 된다.

 

사용 방법 2

이렇게 사용하는 방법 말고도, useQuery가 반환하는 data, isLoading, isError 를 통해 데이터의 상태 관리를 할 수 있다.

 

useQuery가 반환하는 값들의 목록은 공식 문서에서 자세하게 확인할 수 있다.

useQuery | TanStack Query Docs

 

위에와 같이 첫 번째 파라미터에는 unique key를, 두 번째 파라미터에는 사용자가 호출하고자 하는 비동기 함수를 넣어준다.

// 개시물 리스트 데이터
const [postList, setPostList] = useState(null);
const { data, isLoading, isError } = useQuery(["postList"],fetchListData)

...

useEffect(() => {
  if (data) {
    setPostList(data);
  }
},[data,setPostList])

// 로딩 중(게시물 리스트 데이터)
if (isLoading) {
  return <div>Loading...</div>;
}

// 에러(게시물 리스트 데이터)
if (isError) {
  return <div>Error fetching data</div>;
}

그래서 비동기 함수 요청이 성공하면 그 결과가 data에 반환이 되고,

요청이 진행 중이면 isLoading이 true, 요청이 성공하거나 실패되면 isLoading이 false가 된다.

isError는 비동기 함수 요청이 실패될 경우 true가 된다.

 

그래서 이를 활용해서 코드를 작성해 실행하면 다음과 같은 결과가 뜬다.

 

React-Query 로 POST 요청

HTTP POST 요청을 하기 위해 axios로 api를 요청하는 코드를 만들어 준다.

// POST 요청을 통해 데이터 보냄
const PostData = async () => {
  try {
    const headers = {
      'Content-type': 'application/json; charset=UTF-8',
    }
    
    const data = {
      title: '제목',
      body: '내용',
      userId: 100,
    }

    return await axios.post("https://jsonplaceholder.typicode.com/posts", data, {
      headers: headers,    
    });

  } catch (error) {
    throw new Error("Failed to post data");
  }
}

그리고 GET 이외의 요청 POST, PUT, DELETE 등 과 같은 요청은 

React Query에서 제공하는 useMutation을 사용한다.

import { useQuery, useMutation } from 'react-query';

 

사용 방법 1

아래 코드와 같이 작성하며

useMutation의 첫 번째 파라미터에는 사용자가 호출하고자 하는 비동기 함수를 넣어준다.

// post 요청
const { mutate } = useMutation(() => PostData(), {
  onSuccess: (data) => {
    console.log('성공', data);
  },
  onError: (error) => {
    console.error(error);
  }
})

해당 코드를 실행해서 성공하면 다음과 같이 로그가 찍히고,

실패하면 다음과 같이 로그가 찍힌다.

 

사용 방법 2

위에서 사용한 방법 이외에도 아래와 같은 코드를 작성할 수 있다.

// post 요청
const mutate2 = useMutation(() => PostData());

// 로딩
if (mutate2.isLoading) {
  return <div>mutation 로딩 중</div>
}
// 에러
if (mutate2.isError) {
  return <div>mutation 실패</div>
}
// 성공
if (mutate2.isSuccess) {
  console.log(mutate2.data);
  return <div>성공</div>
}

 

useMuation에서 사용할 수 있는 값들은 공식 문서에서 자세하게 확인할 수 있다.

https://tanstack.com/query/v4/docs/react/reference/useMutation

useMutation | TanStack Query Docs

 

위에 코드를 실행했을 때, 성공하면 데이터가 출력되고 성공이 화면에 뜬다.

실패했을 때엔, 다음과 같은 화면이 뜬다.

 

전체 코드

 

---

마무리 하며...

동아리에서 개발 프로젝트를 할 때, 내가 React-Query를 사용했던 방식이다.

극히 일부분이고 이 외에도 다양한 기능이 있으니깐 공식 문서를 통해 확인하고 배우는 것을 추천한다.

내가 봐도 내용과 설명이 부족하지만 이 글을 본 누군가가 도움을 얻었으면 좋겠다......