react-query 개념, 기본 문법

 

react-query 사용이유

0. 서버 상태를 관리하는 레이어 전체를 추상화, 개발자가 관리하는 앱 내의 상태에서 UI 상태에만 집중

1. 데이터를 자동으로 캐시하고, 요청을 최적화할 수 있습니다.

2. 네트워크 오류 및 예외 상황을 처리하고 자동으로 재시도 할 수 있는 메커니즘을 제공

3. 기존 미들웨어로 비동기 통신을 처리했을땐, api 동작마다 상태와 응답값을 전역으로 관리했는데

이는 비효율적임 -> react-query는 react 컴포넌트와 통합해 간편하게 상태를 관리

react-query의 서버 데이터 상태 분류 Stale: 서버 / 클라이언트의 정보가 신선하지 않은 상태, 즉 동일함을 보장할 수 없는 상태 Fresh: 서버 / 클라이언트의 정보가 동일하다는 것이 보장됨, 하지만 default 설정으로는 staleTime이 0 이므로 보장되기는 어려움 Fetching: 데이터를 서버에서 가져오는 중

---

 

Store는 전역상태가 저장, 관리하는 공간

비동기 통신 자체와 이에 얽혀있는 다양한 정책들과 함께 Store의 역할이 비대해짐.

기존 redux에서는 redux-saga, redux-thunk 미들웨어로 비동기 통신을 처리했다.

한 프로덕트의 api 동작마다 ajax 상태와 응답값을 바라보는 상태가 생김(success, failure 등)

이것까지 전역 상태로 관리하는 건 굉장히 비효율적.

-> api 동작마다 발생하는 상태를 전역으로 관리함.

 

또한 api 응답에서 받은 데이터 조작, 가공까지 store에서 담당, 관련 코드를 호출

이는 Store가 상태를 관리하는 코드 보단 api 통신을 담당하는 코드로 보임..

 

Store에서 비동기 통신을 걷어내고 Client Side 전역 상태 관리로 탈바꿈

API 통신과 sync를 맞춰야 하므로, Store 밖에서 서버와 관련된 상태 관리방안 마련

-> 그러면서, 서버와 관련된 상태는 마치 전역 상태처럼 사용

 

React Query

: Server State를 관리하는 라이브러리, Server와 Client 사이 비동기 로직들을 손쉽게 다룰 수 있다.

Client에서는 캐싱, 데이터 업데이트 및 관리, lazy load와 같은 최적화, 응답받은 데이터를 어떻게 공유해서 사용할 건지 고민해야함.

React Query는 API 통신을 위한 여러 함수를 useQuery와 같은 Hook 인터페이스로 제공.

import {
  useQuery,
  useQueryClient,
  QueryClient,
  QueryClientProvider,
} from "@tanstack/react-query";

QueryClient : React Query가 Client에서 관리하는 Server State들을 Key를 통해 꺼내 사용할 수 있다.

const queryClient = new QueryClient();

QueryClientProvider : component to connect and provide a QueryClient to your application

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Menus />
    </QueryClientProvider>
  );
}

useQuery

: useQuery Hook으로 수행되는 Query 요청은 HTTP METHOD GET 요청과 같이

서버에 저장되어 있는 “상태”를 불러와 사용할 때 사용합니다.

const { data } = useQuery(
  queryKey, // 이 Query 요청에 대한 응답 데이터를 캐시할 때 사용할 Unique Key (required)
  // queryKey로 서버 상태(API Reaponse)를 로컬에 캐시하고 관리합니다. 
  fetchFn, // 이 Query 요청을 수행하기 위한 Promise를 Return 하는 함수 (required)
  options, // useQuery에서 사용되는 Option 객체 (optional)
);

function Menus() {
  const queryClient = useQueryClient();
  
  const {data} = useQuery({
    queryKey: ["getMenu"],
    queryFn:() =>axios.get(
        "https://jsonplaceholder.typicode.com/posts"
      ).then({ data }) => data),
    },
  });
}

 

useMutation

: 서버의 데이터 변경 요청시, Create, Update, Delete 요청과 같이

API 통신으로 Server State에 Side Effect이 일어나는 경우 사용한다.

  const mutation = useMutation({
    mutationFn: postTodo,
    onSuccess: () => {
      // Invalidate and refetch
      queryClient.invalidateQueries({ queryKey: ['todos'] })
    },
  })

const { mutate } = useMutation(
    (suggest) => axios.post('/menu', { suggest }),
    {
      // Post 요청이 성공하면 위 useQuery의 데이터를 초기화합니다. (invalidateQueries)
      // 데이터가 초기화되면 useQuery는 서버의 데이터를 다시 불러옵니다.
      onSuccess: () => queryClient.invalidateQueries('posts'),
    },
  );

return (
    <div>
      <h1> Tomorrow's Lunch Candidates! </h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}> {item.title} </li>
        ))}
      </ul>

      <button
        onClick={() =>
          mutate({
            id: Date.now(),
            title: 'Toowoomba Pasta',
          })
        }
      >
        Suggest Tomorrow's Menu
      </button>
    </div>
  );
}

---

참고글

https://tanstack.com/query/latest/docs/react/examples/react/basic

https://tanstack.com/query/latest/docs/react/quick-start

https://techblog.woowahan.com/6339/

https://tech.kakaopay.com/post/react-query-1/