React-Query란?

React-Query야 반가워! 근데 어렵군...

React-Query란?

React-Query는 서버에서 가져온 데이터를 웹 브라우저 앱에서 사용하기 쉽게 도와주는 기술이다. 캐싱, 값 업데이트, 에러 핸들링 등 비동기 과정을 더욱 편리하게 해주는 데 사용된다. 앱이 간단하다면 useState와 context API만 사용하더라도 대부분의 client state를 다룰 수 있다. 그러나 복잡도가 올라가고 성능 향상의 필요성이 생긴다면 도구가 필요해진다.

 

React-Query는 Redux보다 진입 장벽이 낮으면서, hook 기반의 로직으로 되어 있어 해당 훅을 사용하는 컴포넌트에서 상태 값의 변경을 간편하게 파악하여 리렌더링을 유발하게 해준다.

 

React-Query의 기능과 장점

React-Query는 데이터의 캐시 처리를 간편하게 할 수 있는 인터페이스를 제공한다.

예를 들어,

• 몇 초 이후에는 데이터가 유효하지 않은 것으로 간주하고 데이터를 다시 불러온다.(invalidateQueries)
• 데이터에 변경점이 있는 경우에만 리렌더링을 유발한다.
• 유저가 탭을 이동했다가 다시 돌아왔을 때 데이터를 다시 불러온다.
• 데이터를 다시 호출할때 응답이 오기 전까지는 이전 데이터를 계속 보여준다. 필요에 따라서는 로딩바와 같은 대안 UI를 보여주기 위해 loading state를 기본적으로 제공한다.
• 동일 데이터를 여러 번 요청하면 한 번만 요청한다.

등이다.

 

이 외에도 무한 스크롤(Infinite Queries)도 가능하다.

 

useQuery

데이터를 get하기 위한 API로, post, update는 useMutation을 사용한다. 첫 번째 파라미터로 unique key가 들어가고, 두 번째 파라미터로 비동기 함수(API 호출 함수)가 들어간다.

  const { data, isLoading, refetch } = useQuery(
    ["notice", "list", page, row, startDate ?? 0, endDate ?? 0, keyword ?? ""],
    () => NoticeApi.getNoticeList(page, row, startDate, endDate, keyword)
  )

 

unique Key는 string과 배열을 받는데, 0번 값은 string값으로 다른 컴포넌트에서 부를 값이 들어가고 두 번째 값을 넣으면 query 함수 내부에 파라미터로 해당 값이 전달된다. return값은 api의 성공, 실패 여부, api return값을 포함한 객체다. 또한, 비동기로 작동한다. 여러 개의 비동기 query가 있다면, useQueries를 대신 사용하는 것이 좋다.

 

예시(출처)

const Todos = () => {
  const { isLoading, isError, data, error } = useQuery("todos", fetchTodoList, {
    refetchOnWindowFocus: false, // react-query는 사용자가 사용하는 윈도우가 다른 곳을 갔다가 다시 화면으로 돌아오면 이 함수를 재실행합니다. 그 재실행 여부 옵션 입니다.
    retry: 0, // 실패시 재호출 몇번 할지
    onSuccess: data => {
      // 성공시 호출
      console.log(data);
    },
    onError: e => {
      // 실패시 호출 (401, 404 같은 error가 아니라 정말 api 호출이 실패한 경우만 호출됩니다.)
      // 강제로 에러 발생시키려면 api단에서 throw Error 날립니다. (참조: https://react-query.tanstack.com/guides/query-functions#usage-with-fetch-and-other-clients-that-do-not-throw-by-default)
      console.log(e.message);
    }
  });

  if (isLoading) {
    return <span>Loading...</span>;
  }

  if (isError) {
    return <span>Error: {error.message}</span>;
  }

  return (
    <ul>
      {data.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
};

isLoading, isSuccess를 status로 한 번에 처리하기

function Todos() {
  const { status, data, error } = useQuery("todos", fetchTodoList);

  if (status === "loading") {
    return <span>Loading...</span>;
  }

  if (status === "error") {
    return <span>Error: {error.message}</span>;
  }

  return (
    <ul>
      {data.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

 

사족

보아하니 React-Query의 편리성 때문에 React-Query로 api 호출에 대해 배우기 시작하는 경우도 있는 것 같다. 얼마나 편리한지 써보고, 기존의 방식과도 비교해보자!

 

https://tanstack.com/query/v4/docs/overview

Overview | TanStack Query Docs