Pagination vs Infinite Scroll

이재홍·2022년 6월 4일

페이지 처리를 하는 방법에는 크게 일반적인 방식, 무한 스크롤 방식 2가지 방법이 있다. 일반적 방식의 페이지 처리 즉 페이지네이션이란 무엇인가??

페이지네이션(Pagination)은 여러 개의 게시물을 보여주는 웹사이트에서 보통 화면 하단에서 볼 수 있는 UI 이다.

페이지 번호를 클릭해서 이동하는 방식의 페이지 처리 방법이다.

게시판 형태의 페이지에서 가장 일반적으로 사용되는 방식.

사용자들은 페이지네이션을 일상적으로 사용하고 있기 때문에 인식하지 못하지만, 사실 페이지네이션 처리를 위해서 다양한 것을 고려해주어야한다.

페이지네이션을 단계적으로 만들면서 고려해야 할 부분들이 있다!

1. page 인자를 사용해서 게시글 목록 불러오기! (fetch)

2. 페이지 클릭 시 게시글 목록 데이터 다시 불러오기! (refetch)

page 숫자를 클릭할 때마다 목록에 뿌려진 데이터가 해당 페이지에 해당하는 데이터로 변경되게 하기 위해서 씀
graphQL 의 useQuery 에서 제공하는 refetch 함수란? 페이지 클릭시 해당 페이지에 해당하는 데이터를 다시(re) 불러올(fetch) 하는 것 useQuery에서 data와 함께 refetch 라는 하무를 불러오면 쓸 수 있다.
필요한 부분에 불러온 refetch 함수를 넣어주고, refetch의 인자 에 변경될 variables (이 경우는 page) 를 입력하자

3. map 을 이용해 페이지네이션 뿌리자

모든 페이지네이션의 숫자를 직접 입력하는 작업은 비효율적이다.
하드코딩 하면 1~10페이지의 페이지네이션밖에 만들지 못한다.

페이지네이션 next / prev 구현

map을 사용할 때 index도 인자로 받아올 수 있다. 이것을 활용해서 다음과 같은 방식으로 페이지네이션을 만들어 줄 수 있다

{new Array(10).fill(1).map((_, index) => (
  <span
    onClick={onClickPage}
    id={String(index + startPage)}
    key={index + startPage}
  >
    {` ${index + startPage} `}
  </span>
))}

이런 경우, 시작 페이지에 해당하는 startPage의 값을 변경해주면 현재 페이지 이후의 10페이지, 이전의 페이지를 불러오는 기능도 구현이 가능.

4. lastPage 설정

여기까지 왔으면 페이지네이션의 기본적인 틀이 잡혀 있을 것.
하지만 마지막 페이지를 훌쩍 지나갔는데도 계속해서 다음 페이지를 불러오고 있을 것이다. 마지막 페이지를 어떻게 설정할까?

게시글의 총 개수를 불러와서 마지막페이지의 값을 구한다!

// lastPage 구하기
const lastPage = Math.ceil(dataBoardsCount?.fetchBoardsCount / 10);

그리고 이전, 다음 페이지를 클릭했을 때 실행되는 함수에 조건을 설정

1페이지 미만 && lastPage가 화면에 출력된 이후 로는 이전, 다음 버튼이 동작하지 않도록 만들어 준다.

map에 조건부 렌더링을 걸어 lastPage보다 큰 숫자는 출력되지 않도록 만들어 준다

{new Array(10).fill(1).map(
  (_, index) =>
    index + startPage <= lastPage && (
      <span
        onClick={onClickPage}
        id={String(index + startPage)}
        key={index + startPage}
      >
        {` ${index + startPage} `}
      </span>
    )
)}

5. 이전 페이지, 다음 페이지 이동 시 refetch

11~ 20페이지 라면 11페이지 로 21~30 페이지라면 21페이지 로 게시글 목록이 함께 이동 되어야 한다.

첫 번째 방법은 refetch를 이용

startPage가 1이라면~?
startPage + 10가 lastPage보다 클 경우 ??

두 번째 방법은 게시글 목록을 불러오기 위하여 useQuery 에 넣는 variables에 startPage라는 state를 넣어주는 방법

이렇게 하면 이전페이지, 다음페이지를 눌러서 startPage가 변경될 때 마다 바뀐 startPage의 데이터가 새로 뿌려지게 된다.

ex)

export default function MapBoardPage() {
  const [startPage, setStartpage] = useState(1);
  const { data, refetch } = useQuery(FETCH_BOARDS);
  const { data: dataBoardsCount } = useQuery(FETCH_BOARD_COUNT);

  const lastPage = Math.ceil(dataBoardsCount?.fetchBoardsCount / 10);

  const onClickPage = (event: any) => {
    refetch({ page: Number(event.target.id) });
  };
  // 이전페이지
  const onClickPrevPage = () => {
    if (startPage === 1) {
      return;
      // startPage가 1이라면 조건문으로 return 으로 함수종료
    }
    setStartpage((perv) => perv - 10); // 뺴기 10
    refetch({ page: startPage - 10 });
  };

  // 다음페이지
  const onClickNextPage = () => {
    if (startPage + 10 <= lastPage) {
      setStartpage((perv) => perv + 10); // 기존에 있던 startpage에 더하기 10해줘
      refetch({ page: startPage + 10 });
    }
  };

  return (
    <div style={{ margin: "20px" }}>
      {data?.fetchBoards.map((el: any) => (
        <MyRow key={el._id}>
          <MyColumn>{el.writer}</MyColumn>
          <MyColumn>{el.title}</MyColumn>
        </MyRow>
      ))}
      <span onClick={onClickPrevPage}>&lt; </span>
      {new Array(10).fill(1).map((_, index) => {
        if (index + startPage <= lastPage) {
          return (
            <span
              key={index + startPage}
              id={String(index + startPage)}
              onClick={onClickPage}
            >
              {" "}
              {index + startPage}{" "}
            </span>
          );
        } else {
          return <span></span>;
        }
      })}
      <span onClick={onClickNextPage}>&gt;</span>
    </div>
  );
}