[React] React Query의 기초 지식(Stare, Cache, Prefetching 등)을 총결하였다.

개시하다
새로운 현장에서는 리액트의 상태 관리가 레드ux를 사용하지만, 액티브 크리에이터와 리듀서 등은 코드량이 많아 움츠러드는 경우가 많다.
이런 고민을 해결하는 컨디션 관리 라이브러리로 리액트 큐리가 유행하기 때문에 이번에는 배워보기로 했다.
예전에 쓴 컨디션 관리 기사도 보시면 좋을 것 같아요.
이른바 React Query
React Query의 가장 큰 특징은 서버에서 얻은 데이터를 클라이언트 캐시로 저장할 수 있다는 것입니다.
또한 새 데이터를 가져올 때 캐시가 언제 업데이트되는지 등을 관리할 수 있다.
초기 가져오기npm install react-query에 패키지를 설치한 후 쿼리와 캐시를 관리하는 queryClient를 제작하고 로트 구성 요소를 QueryClientProvider로 패키지합니다.QueryClientProvider는 캐시와 클라이언트 설정을 아래 구성 요소에 제공하거나 값으로 가져오는 역할을 한다.
그리고 랩 구성요소에 훅스queryClient를 사용하면 조회가 가능하다.
App.jsx

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">
        <Posts />
      </div>
      <ReactQueryDevtools />
    </QueryClientProvider>
  );
}

패키지 구성 요소useQuery()에 데이터 변화를 관리하기 위해 React Query를 사용하는 개발자 도구입니다.

Fetching
다음 데이터를 가져오는 함수ReactQueryDevTool에서 데이터를 얻습니다.

async function fetchPosts(pageNum) {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts?_limit=10&_page=${pageNum}`
  );
  return response.json();
}

useQuery()의 첫 번째 파라미터는useQuery()이고, 두 번째 파라미터는 추출 함수를 호출로 설정합니다.
그리고 당신은 key 등 각종 속성을 획득할 수 있습니다.

  const { data, isError, error, isLoading, isFetching } = useQuery(
    'posts',
    () => fetchPosts(currentPage)
  );

isFetching과 isLoading의 차이점data는 조회 함수가 데이터를 얻기 전의 상태를 가리키며, isFetching는 isLoading의 상태를 제외하고는 데이터를 캐시하지 않은 상태를 가리킨다.
즉 현금이 있다면isFetching은isLoading,바로false 이런 관계다.
예를 들어 방문이 끝난 페이지를 다시 방문할 때 캐시가 있어서 데이터가 잘 나오지만 아래isFetching ⊃ isLoading 화면을 보면 ReactQueryDevTools의 상태임을 알 수 있다.

Stale time과 Cache time의 차이점
위 화면에는 fetching의 오른쪽에fetching가 있는데 이것도React Query의 캐시 기구를 이해하는 중요한 키워드이다.
Stale time란 캐시된 데이터를 오래된 것으로 간주하는 시간을 말합니다.
기본적으로 Stale time는 stale이지만 아래 설정0 s을 통해 staleTime: 1000 이내에 다시 방문하는 페이지라면 데이터를 새로운(fresh)으로 보고 인출하지 않고 현금으로 사용합니다.1000 ms 초과 시 캐시를 사용할 수 없으며 데이터를 다시 가져올 수 없습니다.

  const { data, isError, error, isLoading, isFetching } = useQuery(
    'posts',
    () => fetchPosts(currentPage),
    {
      staleTime: 1000,
    }
  );

한편,Cache time는 데이터를 캐시하는 시간을 말합니다.
기본값은 5분(3000ms)입니다.1000 msstaleTime: 0일 경우 같은 페이지를 다시 액세스하면 캐시 데이터가 화면에 표시되지만 시간이 지나면 캐시 데이터가 이전 데이터로 간주되므로 백그라운드에서 재추출이 수행됩니다.
useQuery ()의 키cacheTime: 300000의 첫 번째 매개 변수에 단일staleTime을 제공할 때 다시 얻은 촉발은 다음과 같은 상황이다.

구성 요소 재설치

창 초점 재조정

실행 재추출 함수

만약 이러한 상황에서 벗어나면 조회를 실행하지 않고 재취득도 하지 않는다.
이 문제를 해결하기 위해 useQuery()를 의존수조로 처리하고 내용값이 변할 때key를 실행한다.
예를 들어 페이지 문자key에 변화가 생겼을 때useQuery()에 실행하면 다음과 같다.

  const { data, isError, error, isLoading, isFetching } = useQuery(
    ['posts', currentPage],
    () => fetchPosts(currentPage),
    {
      staleTime: 2000,
    }
  );

Prefetching
Prefetching은 예측된 데이터를 캐시에 쓰고 페이지를 열어 추출할 때 캐시 데이터를 표시하는 것을 말한다.currentPage에서 미리 준비useQuery()를 하고 현재 페이지를 열 때 useEffect()의 prefetchQuery()에 다음 페이지의 데이터를 캐시합니다.

  const queryClient = useQueryClient();

  useEffect(() => {
    if (currentPage < maxPostPage) {
      const nextPage = currentPage + 1;
      queryClient.prefetchQuery(['posts', nextPage], () =>
        fetchPosts(nextPage)
      );
    }
  }, [currentPage, queryClient]);

Mutation['posts', nextPage]에서 데이터 취득 처리가 이루어졌지만 쓰기 처리를 위한 Hookskey로도 사용되었다.useQuery()와는 다른 점은 다음과 같다.

useMutation() 반환 함수

필요 없음useQuery()

있음mutate하지만 없음key

기본 재시도 없음

예를 들어 데이터 삭제에 사용되는 다음과 같은 함수를 고려합니다.

async function deletePost(postId) {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/postId/${postId}`,
    { method: 'DELETE' }
  );
  return response.json();
}

isLoading에서 정의isFetching.

const deleteMutation = useMutation((postId) => deletePost(postId));

Delete 가져오기 버튼을 사용하여 데이터 삭제를 수행할 수 있습니다.

<button onClick={() => deleteMutation.mutate(post.id)}>Delete</button>

참고 자료