[React] ReactQuery에 대해서 좀 더 알아보자

사용이유

ReactQuery를 왜 써야하는가를 알고 사용을 하자!

1. Store를 좀 더 효율적으로 관리를 해보자

redux를 이용해서 비동기 통신의 데이터를 처리하다보니 store의 크기가 점점 커지게 됨에 따라서 원래 기능인 전역관리와 비동기통신을 구분해줘야겠다는 생각으로 사용하면 된다.

 

2. boiler plate의 감소

기존의 비동기 통신에서 try catch문을 통해서 ErrorHandling을 했더라면 ReactQuery를 사용하면 좀 더 쉽고 boiler plate를 감소하면서 비동기통신데이터에 대한 관리를 전담해서 할 수 있다.

 

https://abangpa1ace.tistory.com/entry/%EC%9E%91%EC%84%B1%EC%A4%91React-Query-2-Queries%EC%BF%BC%EB%A6%AC

[React Query] (2) useQuery()

나중에 심심하다면 카카와 우아한형제들 기술블로그를 좀 더 염탐을 해보면 좋을 것 같다.

---

 

Query의 기본개념

 

이전 강의를 듣고 정리한 내용에서는 기본적인 CRUD의 과정에서 어떻게 쓰이는 지에 대해 알 수 있었다.

하지만 더 정확하게 전역관리와 비동기통신에 대해서 구분을 하고 원하는대로 구현하기 위해서는 조금 부족하다는 생각을 하게 되었고, 좋은 블로그가 있어서 그 블로그 내용을 기반으로 새롭게 추가 된 개념들에 대해 정리를 하게 되었다.

 

1. ReactQuery의 LifeCycle

• fetching : 요청중인 쿼리
• fresh : 만료되지 않은 쿼리. 컴포넌트가 마운트, 업데이트 되어도 데이터를 재요청하지 않음
• stale : 만료된 쿼리. 컴포넌트가 마운트, 업데이트되면 데이터를 다시 요청한다
• inactive : 사용하지 않는 쿼리. 일정 시간이 지나면 가비지 컬렉터가 캐시에서 제거
• delete : 캐시에서 제거된 쿼리.

ReactQuery를 사용하면서 Query가 어떤상태를 유지하고 그 상태의 특징에 대해서 알고있다면 좀 더 UX의 개선이나 나중에 배울 다른개념에 대해서도 좀 더 이해하기 쉬울 것이라고 생각이 든다.

 

2. React Query의 기본설정

default 설정 값을 통해 현재 내가 사용하고 있는 Query는 어떤 상태인지 유추를 하면서 좀 더 잘 사용할 수 있는 방법을 생각해보자

• useQuery(와 useInfiniteQuery)로 가져온 데이터는 기본적으로 stale 상태. (staleTime 옵션으로 만료를 지연시킬 수 있음)
• stale 쿼리는 아래와 같은 경우에 백그라운드에서 다시 가져온다.
  • 새로운 쿼리 인스턴스가 마운트되었을 때 
  • 브라우저 윈도우가 다시 포커스되었을 때
  • 네트워크가 다시 연결되었을 때
  • refetchInterval 옵션이 있을 때

const [todos, loading, error] = useQuery("todos");
//쿼리 인스턴스 (예시) useQuery를 통해 가져올 수 있다

• 활성화된 useQuery(와 useInfiniteQuery) 인스턴스가 없는 쿼리 결과는 "inactive" 라벨이 붙으며 다음 사용까지 남아있는다.
  inactive 쿼리는 300초(5분) 후에 메모리에서 해제된다. (5분마다 갱신된다.)
• 백그라운드에서 3회 이상 실패한 쿼리는 에러처리 된다. (retry 옵션으로 재시도 횟수, retryDelay 옵션으로 재시도 대기시간 설정)

 

---

 

다양한 useQuery의 기능

 

1. useQuery By Id

useQuery를 사용할 때 Id값을 전달해서 비동기통신의 query에 추가 할 수 있는 방법

useQuery(['todos', todoId], () => fetchTodoById(todoId))
useQuery(['todos', todoId], async () => {
  const data = await fetchTodoById(todoId)
  return data
})
useQuery(['todos', todoId], ({ queryKey }) => fetchTodoById(queryKey[1]))

이렇게 전달한 ID는 아래와 같이 비동기 통신에서 쓰일 수 있으며 이러한 방법을 통해서 router의 효과를 낼 수 있지 않을까라는 생각도 하게하는 부분이였음.

 

const fetch = ({ queryKey }) => {
  const id = queryKey[1];
  return axios.get(`http://localhost:4000/superheroes/${id}`);
};

export const useSuperHeroQuery = (heroId) => {
  const queryClient = useQueryClient();
  return useQuery(["super-hero", heroId], fetch, {
    initialData: () => {
      const hero = queryClient.getQueryData("super-heroes")?.data?.[0] || null;
      return hero ? { data: hero } : undefined;
    },
  });
};

 

 

2. useQueries

promiseAll과 비슷한 느낌으로 사용된다는데 아직 어떻게 사용해 할지 감이 잘 안잡힘.

 

3. Dependent Query

API의 결과값을 가지고 다른 API를 실행하는 경우가 있다 이런경우에는 동기적인 순서로 실행이 되어야하는데 Dependent Query를 사용하지 않으면 다른 API가 이전에 실행한 API의 결과값을 제대로 가져가지 못한다 그래서 사용해야 한다.

const fetchUser = (email) => axios.get(`http://localhost:4000/users/${email}`);

const fetchCourse = (channelId) =>
  axios.get(`http://localhost:4000/channels/${channelId}`);

const RQDependentQueriesPage = ({ email }) => {
  const { data: user } = useQuery(["user", email], () => fetchUser(email));
  const channelId = user?.data.channelId;
  const { data: courses, isLoading } = useQuery(
    ["courses", channelId],
    () => fetchCourse(channelId),
    {
      enabled: channelId,
      //여기를 주목해서 보아야함 (원래는 enabled: !!channelId 였음 한번 실험해 봐야함) 
    }
  );

 

3. pagination과 infinite scroll에 사용할 수 있는 쿼리도 있지만 이건 더 좋은 라이브러리가 있으니깐 그걸 활용하는 것을 먼저 하고 나서 생각을 하는게 더 좋을 것 같다

 

4. useMutation에 대한 개념도 조금 더 잘 잡힐 수 있게 하는 글이 여깄다

https://abangpa1ace.tistory.com/entry/React-Query-4-useMutations

[React Query] (4) useMutation()