[React Query] 데이터 프리페칭 Prefetching

💻 Prefetching

데이터가 실제로 필요하기 전에 사전에 데이터를 가져오고 캐시에 저장하는 프로세스를 말한다.
이를 통해 데이터를 미리가져올 수 있으므로 필요할 때 데이터를 즉시 사용할 수 있도록 하여 애플리케이션의 응답성과 사용자 경험을 개선할 수 있도록 한다.

• 데이터를 사용하고자 할 때 만료 상태에서 데이터를 다시 가져온다.
• 데이터를 가져오는 중에는 캐시에 있는 데이터를 이용해 화면에 나타낸다.
• 추후 사용자가 사용할 법한 데이터에 프리페칭을 사용한다.
• 페이지네이션과 다수의 사용자가 웹에서 특정 탭을 누를 확률이 높은 곳에 프리페칭을 통해 해당 데이터를 미리 가져오는 것이 좋음

🖤 적용

// Post function 
import { useQueryClient } from "react-query";

// 사용하고자 하는 컴포넌트에 useQueryClient를 호출
const queryClient = useQueryClient();

나는 이전 페이지네이션을 구현했던 코드를 예를 들겠다.

 useEffect(() => {
        // 알고있는 범위 외의 데이터를 가져오지 않도록 조건을 추가
        if (currentPage < maxPostPage) {
            const nextPage = currentPage + 1;
            //useQuery에 사용한 쿼리키와 똑같은 모습을 함
            queryClient.prefetchQuery(["posts", nextPage], () => fetchPosts(nextPage));
        }
    }, [currentPage, queryClient]);

    // 반환객체에서 useQuery로 데이터 속성을 구조분해한다.
    // useQuery는 n개의 인수를 받는데 쿼리이름을 말하는 쿼리키, 쿼리에 대한 데이터를 가져오는 방법인 쿼리함수(데이터를 가져오는 비동기함수여야함),
    const { data, isError, error, isLoading } = useQuery(["posts", currentPage], () => fetchPosts(currentPage), {
        staleTime: 2000,
        //이전페이지로 돌아갔을때 캐시에 해당 데이터가 있도록 설정
        keepPreviousData: true,
    });

• 특징
  useQueryClient와 prefetchQuery메서드를 활용해 데이터를 미리 가져와 캐시에 저장함으로써 애플리케이션의 응답성과 사용자 경험을 향상시킬 수 있다. 즉 특정데이터가 필요한 시점을 예측하고 요청 시점에 미리 데이터를 준비하고자 할때 프리페칭은 매우 유용하다.

✔ 적용 전

페이지를 넘길때 로딩페이지가 보여 사용자 경험에 안좋은 영향을 준다.

✔ 적용 후

결과 화면을 보면 일단 페이지가 부드럽게 넘겨지는 것을 확인할 수 있다. 이때 리액트쿼리 개발자도구를 봤을때 현재페이지의 다음페이지가 미리 불러와져 있다. 이것을 프리페칭이라 한다.