[React-query] 리액트쿼리 맛보기 !

회사 프로젝트중에서 react-query를 사용하고 있었다. 전부터 공부해보고 싶었는데 이번기회에 시작해보게 되었다.

1. 리액트쿼리는 왜 사용할까?

• 데이터를 캐싱한다 - 캐싱 된 데이터로 인해서 API 콜을 줄여주며 서버에 대한 부담을 줄여줄 수 있다.
• 서버데이터와 클라이언트 데이터의 분리
• 다양한 hooks
• fetch 과정 간소화

2. 그렇게 좋다고하니 간단하게 한번 사용해보자 !!

우선 cra를 사용하여 react 프로젝트를 생성한다.

npx create-react-app react-query-test

 

 

비동기 통신 라이브러리로는 axios를 사용할 것이고, 서버 관련 라이브러리로는 json-server를 사용

npm i json-server

 

 

react-query를 설치한다. 여기까지하면 필요한 dependency는 다 설치하였다.

npm i react-query

 

 

index.js에서 react-query를 import하고 provider로 감싸서 모든 컴포넌트에 query client를 전달해준다.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>
);

 

 

서버와 DB를 대신할 더미데이터를 루트디렉토리에 만들어 줍니다.

{
  "posts": [
    {
      "id": 1,
      "title": "게시물1",
      "author": "Kkiri",
      "description": "벌레는 흙으로 별에도 헤는 그리고 둘 위에 딴은 위에도 버리었습니다. 내린 계절이 밤을 아무 나는 하나에 경, 별 봅니다. 잠, 묻힌 그리고 패, 강아지, 잔디가 가을로 나의 다 듯합니다. 이름과, 잔디가 까닭이요, 위에 밤이 사람들의 계십니다. 잠, 이름과, 차 이 까닭입니다. 같이 딴은 가을로 경, 별빛이 비둘기, 동경과 하나에 둘 계십니다. 멀리 없이 시인의 오면 불러 봅니다. 자랑처럼 이름자 많은 불러 딴은 별 별을 버리었습니다. 하나에 언덕 릴케 있습니다."
    },
    {
      "id": 2,
      "title": "게시물2",
      "author": "끼리",
      "description": "노새, 나의 라이너 너무나 있습니다. 별 계절이 멀리 아무 파란 가득 무덤 가을 자랑처럼 듯합니다. 이런 별이 별 위에도 까닭입니다. 계집애들의 않은 까닭이요, 까닭입니다. 멀리 것은 차 계절이 헤일 이 딴은 위에 어머님, 까닭입니다. 그리워 지나가는 쓸쓸함과 헤는 거외다. 잔디가 멀리 별 이네들은 이름을 까닭입니다. 불러 봄이 헤는 않은 오면 하나에 버리었습니다. 내일 하늘에는 무덤 나는 계십니다. 불러 벌써 별 까닭입니다. 나의 별 밤을 듯합니다."
    },
    {
      "id": 3,
      "title": "게시물3",
      "author": "끼리끼리",
      "description": "애기 소녀들의 이름과 다하지 별이 듯합니다. 이웃 쓸쓸함과 멀리 하나에 둘 별에도 별 소학교 계십니다. 이국 비둘기, 불러 거외다. 이네들은 청춘이 위에 자랑처럼 내 헤일 계십니다. 나는 멀리 아스라히 무덤 별이 때 라이너 헤는 까닭입니다. 언덕 하늘에는 사랑과 다 둘 듯합니다. 별 멀듯이, 위에도 말 이런 봅니다. 나는 봄이 이네들은 나는 옥 까닭입니다. 써 노새, 남은 아스라히 있습니다. 아이들의 새워 덮어 까닭입니다."
    }
  ]
}

 

 

이제 서버를 실행해주기 위해 package.json에 script를 수정한다.

"server": "json-server --watch db.json --port 5000"

 

 

서버를 실행해준다.

npm run server

 

 

이제 App.js에서 useQuery를 사용하여 데이터를 가져온다. useQuery와 같은 훅에 대해서는 다음글에서 세세하게 다루겠다.

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

const getPosts = async () => {
  const { data } = await axios.get("http://localhost:5000/posts");

  return data;
};

function App() {
  const {
    data: posts,
    isLoading,
    isError,
    error,
  } = useQuery("posts", getPosts);

  isError && <div>{error.message}</div>;

  return (
    <>
      <div>
        {isLoading ? (
          <div>Loading...</div>
        ) : (
          posts?.map((post) => (
            <div key={post.id}>
              <div>id: {post.id}</div>
              <div>제목: {post.title}</div>
              <div>작성자: {post.author}</div>
              <div>내용: {post.description.slice(0, 100)}...</div>
              <hr />
            </div>
          ))
        )}
      </div>
    </>
  );
}

export default App;

 

 

이렇게까지하면 다음과 같이 react-query로 데이터를 불러 올 것이다.

 

 

[React-query] 리액트 쿼리를 사용해보자!

react-query 개념 및 정리

React Query(리액트 쿼리) 개념 및 예제(1) | Kkiri Blog