react-query..

Performant and powerful data synchronization for React!
-리액트를 위한 성능좋고 강력한 데이터 동기화!

Fetch, cache and update data in your React and React Native applications all without touching any "global state"
-"전역 상태"를 건드리지 않고 리액트와 리액트 네이티브 어플리케이션에서 데이터를 fetch, cache, update한다.

리액트 쿼리는 서버의 값을 클라이언트에 가져오거나 캐싱, 업데이트, 에러 핸들링 등 비동기 과정을 더욱 편하게 사용할수 있습니다.

useQuery

---

/* eslint-disable jsx-a11y/anchor-is-valid */
import React from "react";
import ReactDOM from "react-dom";
import { QueryClient, QueryClientProvider, useQuery } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";
import axios from "axios";

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
  );
}

function Example() {
  const { isLoading, error, data, isFetching } = useQuery("repoData", () =>
    axios.get(
      "https://api.github.com/repos/tannerlinsley/react-query"
    ).then((res) => res.data)
  );

  if (isLoading) return "Loading...";

  if (error) return "An error has occurred: " + error.message;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>👀 {data.subscribers_count}</strong>{" "}
      <strong>✨ {data.stargazers_count}</strong>{" "}
      <strong>🍴 {data.forks_count}</strong>
      <div>{isFetching ? "Updating..." : ""}</div>
      <ReactQueryDevtools initialIsOpen />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

위의 예제코드에서 보면 최상의 router 부분에 react-query를 사용하기 위한 초기 세팅이 들어가고 Example 컴포넌트에서 사용하게 됩니다.

const { isLoading, error, data, isFetching } = useQuery("repoData", () =>
    axios.get(
      "https://api.github.com/repos/tannerlinsley/react-query"
    ).then((res) => res.data)
  );

위의 부분을 보면 구조분해 할당으로 isLoading, error, data, isFetching을 한번에 처리하는 모습이 보인다..! useQuery의 첫번째 인자로는 key값이 들어가고 두번째 인자로는 함수모양으로 안쪽에 axios.get을 이용해서 원하는 데이터를 가져올수가 있습니다.

위의 방식처럼 이용한다면 로딩을 나타낼때 에러를 처리할때 따로따로 지정하지 않고도 리액트 쿼리를 통해서 한번에 처리가 가능합니다..👍

첫번째 인자로 설정한 key값은 다른 컴포넌트에서도 해당키를 사용하면 호출이 가능하고, key는 string과 배열을 받을 수 있습니다. 배열로 key를 받는다면 배열의 첫번쨰 값은 string값으로 다른 컴포넌트에서도 부를수 있는 값이 들어가고 두번째 값은 query 함수 내부에 인자로 해당값이 전달됩니다.

useQuery는 비동기로 작동하게 됩니다. 즉, 한 컴포넌트에 여러개의 useQuery가 있다면 여러개의 useQuery가 동시에 실행되는 것입니다. 이러한 경우에는 useQuery보다는 useQueries를 사용하는게 좋습니다.