페이지네이션

페이지네이션이란?

사이트에서 렌더링을 할때 만약 수많은 모든 데이터를 한 번에 받아온다면 접속할 때 시간이 어마어마하게 걸릴 것이다.

 

그러한 부분을 해결하기 위해 렌더링할때 필요한 데이터만 가져온 후 그 다음부터는 스크롤, 더보기, 페이지 버튼 등을 이용해 데이터를 추가적으로 받아오도록 데이터를 조금씩 나눠 가져 오는 걸 페이지네이션(pagination)이라고 한다.

 

책 페이지처럼 데이터를 나눠서 제공하는 방식이기에 붙여진 이름이며 많은 양의 데이터를 가져올 때 적합한 방식이다.

 

코드잇 강의에서는 페이지네이션의 오프셋(지금까지 받아온 개수) 방식을 배울수 있었다.

 

아래처럼 offset값과 limit값을 요청(Request)하면 서버는 리스폰스로 데이터를 보내주는데,  받아온 데이터의 개수를 기준으로 추가적으로 더 받아올 데이터들을 요청하는 방식이다.

offset = 지금까지 받아온 데이터의 개수 , limit = 더 받아올 데이터의 개수

 

 

실습으로 아래그림의  더보기 클릭으로 데이터를 가져오는 방식을 사용하였는데

 

 

더보기 버튼 클릭 이벤트로 api에 offset과 고정된 limit(6)값을 요청하여 더보기를 클릭할 때마다 6개의 리뷰들이 추가적으로 생성되게끔 하는 것이다.

import { useEffect, useState } from 'react';
import ReviewList from './ReviewList';
import { getReviews } from '../api';

const LIMIT = 6;

function App() {
  const [order, setOrder] = useState('createdAt');
  const [offset, setOffset] = useState(0);
  const [hasNext, setHasNext] = useState(false);
  const [items, setItems] = useState([]);

. . . . .

  const handleLoad = async (options) => {
    const { paging, reviews } = await getReviews(options);
    if (options.offset === 0) {
      setItems(reviews);
    } else {
      setItems([...items, ...reviews]);
    }
    setOffset(options.offset + options.limit);
    setHasNext(paging.hasNext);
  };

  const handleLoadMore = async () => {
    await handleLoad({ order, offset, limit: LIMIT });
  };

  useEffect(() => {
    handleLoad({ order, offset: 0, limit: LIMIT });
  }, [order]);

  return (
    <div>
      <ReviewList items={items}/>
      <button disabled={!hasNext} onClick={handleLoadMore}>
        더 보기
      </button>
    </div>
  );
}

export default App;

 

 

이번 코드잇 스프린트 미션에서도  비슷한 부분을 구현해야하는 것 같았다.

하지만 피그마의 디자인이 아래처럼 아까 배웠던 내용보다는 조금 더 많은 부분이 요구 되었다

• 총 페이지 개수
• 다음, 이전 버튼
• 화면에 보여질 페이지 그룹
• 화면에 보여질 페이지의 첫번째 페이지 번호
• 화면에 보여질 페이지의 마지막 페이지 번호

 

다음 글에서 기존에 구현해놓았던 itempage에 페이지네이션을 적용하는 과정을 정리해보려고 한다.

 

https://injaeee.tistory.com/24

페이지네이션 적용하기