React Query) 3. PagenatedQueris 페이지네이션 구현하기

1. PagenatedQueries, InfintieQueries 란?

영어라서 복잡하게 들리지만 알아듣기 쉽게 말하면 페이지 네이션, 무한 스크롤입니다.

이걸 왜 쓰는가 하면

예를 들어 데이터가 1억 개가 있는 홈페이지가 있습니다.

페이지가 데이터를 불러올 때 1억 개의 데이터를 몽땅 가져오면 속도도 느릴뿐더러 서버 부하도 걸리기 때문에 데이터를 필요한 만큼만 불러오면 자원을 아낄 수 있죠. 페이지 네이션과 무한 스크롤이 이 역할을 합니다

백엔드와 프론트엔드 둘 다 설정을 해야 되지만 프론트엔드 측면에서 알아보겠습니다.

 

2. PagenatedQueries

백엔드는 완성이 되어있다고 가정합니다
받아오고 싶은 Data는 color입니다
한 페이지에 두 개의 데이터를 띄우고 싶습니다.

백엔드에 요청을 보낼 때, 내가 지금 몇 페이지의 데이터를 보고 싶은지 파라미터로 같이 보내겠습니다.

const fetchColors = async (pageNumber: number) => {
  const response = await axios.get(
    `http://localhost:4000/colors?_limit=2&_page=${pageNumber}`
  );
  return response.data;
};

 

 

몇 번째 페이지인지 useState로 저장하고 useQuery를 불러겠습니다.

  const [pageNumber, setPageNumber] = useState(1);
  const { data } = useQuery<
    Color[]>(["colors", pageNumber], () => fetchColors(pageNumber), {
    keepPreviousData: true,
  });

 

이전이랑 queryKey 값이 조금 다른데요, 배열 형태로 data의 이름과 pageNumber를 넣어 페이지마다 key값이 다르게 설정해주었습니다.

 

옵션으로 넣은 keepPreviousData는 쿼리 키(ex. 페이지 번호)가 변경되어서 새로운 데이터를 요청하는 동안에도 마지막 data값을 유지합니다.

캐시 되지 않은 페이지를 가져올 때 화면에서 목록이 사라지는 깜빡임 현상을 방지할 수 있습니다.

페이지 네이션을 구현할 때 유용합니다. 물론 빼셔도 작동은 잘 됩니다.

 

자 여기까지 했으면 전체적으로 어떻게 돌아갈지 느낌이 오시나요??

 

이제 버튼을 만들고 setPageNum을 사용해 pageNum만 바꾸면

useQuery가 각각 다른 키값으로 원하는 데이터를 "data"라는 변수에다 담아 가져와 줍니다.

keepPreviousData으로 깜빡임까지 없으니 너무 좋죠

 

잘 실행 됩니다!

 

다음 포스팅은 무한 스크롤 InfintieQueries 알아보겠습니다 감사합니다