이번에 웹사이트 외주를 하며 다양한 여러 스택을 배워보고자 정리한 것을 올리려고 한다.

1. what is react-query?

fetching, caching, synchronizing and updating server state

react-query 공식 문서에서는 react-query는 서버의 상태를 fetching하고 caching하고, 동기화시키며 업데이트하는 리액트의 라이브러리이다.
이 server state은 리액트 앱이 소유하고 있지 않다. 그러므로 어떤 웹사이트에 접속했을 때 CSR 방식의 렌더링이라면 사용자가 렌더링할 때까지 데이터는 최신화되지 않는다. 즉, 만료된 데이터를 받을 확률이 높다는 것이다.

이에 사용자의 최적화를 위해서 만료된 데이터를 re-fetch하고, 미리 데이터를 pre-fetch해서 사용자가 받아볼 데이터를 미리 가지고 있거나, 사용되지 않는 cache data를 자동으로 garbage collection으로 보내는 등 사용자의 편의를 위해 다양한 기능을 제공한다.

2. Why should we use it?

useQuery 도입 전

function App() {
  const [isLoading, setLoading] = useState(false)
  const [isError, setError] = useState(false)
  const [data, setData] = useState({});

  useEffect(() => {
    const fetchData = async () => {
      setError(false);
      setLoading(true);

      try {
        const response = await axios(
          "https://jsonplaceholder.typicode.com/posts?_limit=10&_page=0"
        );

        setData(response.data);
      } catch (error) {
        setError(true);
      }
      setLoading(false);
    };
    fetchData()
  }, []);

useQuery 도입 후

  const fetchData = () => {
    const response = await axios(
    "https://jsonplaceholder.typicode.com/posts?_limit=10&_page=0"
  );
  return response.json();
    
  const { isLoading, error, data } = useQuery('posts',fetchData)

useQuery 안에 isLoading, isFetching, error, isError, data 등 데이터의 상태를 모두 관리하고 있기 때문에 useState와 useEffect의 과정이 모두 포함되어 있다. 다음과 같이 그냥 비구조화 할당으로 손쉽게 데이터를 받아볼 수 있다.

StaleTime

useQuery의 인자는 총 3가지가 있는데, "쿼리이름","콜백함수","staleTime"이다.

staleTime은 데이터를 만료하게 만드는 시간이다. 이 부분이 SSR을 손쉽게 찍먹할 수 있게 만들어주는 장치이다.

react-query에서는 무조건 데이터가 stale, 즉 만료된 상태에서만 re-fetch를 통해 데이터 최신화가 가능하다. 그러므로 staleTime은 default로 0, 즉 데이터는 가져오는 순간 만료된 상태로가 가정한다는 것이다.
데이터를 밀리세컨드 단위로 항상 최신화해야 하는 상황이 아니라면 서버 부하를 줄이기 위해 staleTime을 5~10초 정도로 3번째 인자에 늘려 사용할 수 있겠다.

ex)

  const { isLoading, error, data } = useQuery(
    'posts',fetchData,{staleTime : 2000}
  )

물론 이는 만료시간만 정하는 것이고, 이후 데이터 만료 시에 trigger 함수를 정의해야 한다.

useQuery를 App.js에 적용하기

ReactQueryDevtools

react-query에서 제공해주는 devtool이다. data의 상태 등을 직관적으로 알려줄 수 있는 툴이고, 다음과 같이 App.js 에서 넣게 되면 이후 테스팅 단계에서 꽃 모양의 tool을 눌러 활용할 수 있다. 이는 테스팅 단계에서만 적용되고 실배포에서는 적용되지 않는다.

import { Posts } from "./Posts";
import "./App.css";

import { QueryClient, QueryClientProvider } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";
const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <div className="App">
        <h1>Blog Posts</h1>
        <Posts />
      </div>
      <ReactQueryDevtools />
    </QueryClientProvider>
  );
}

export default App;

출처

1) https://merrily-code.tistory.com/76
2) https://blog.rhostem.com/posts/2021-02-01T00:00:00.000Z