Day 14

김정동·2021년 11월 18일

코드캠프와 달려보자

목록 보기

12/35

페이지네이션

페이지네이션이란?

페이지를 넘겨서 출력해주는 기능을 의미함
실습

import { gql, useQuery } from "@apollo/client";
import {
  IQuery,
  IQueryFetchBoardsArgs,
} from "../../src/commons/types/generated/types";
const FETCH_BOARDS = gql`
  query fetchBoards($page: Int) {
    fetchBoards(page: $page) {
      _id
      writer
      title
    }
  }
`;

export default function PaignationBasicPage() {
  const { data } = useQuery<Pick<IQuery, "fetchBoards">, IQueryFetchBoardsArgs>(
    FETCH_BOARDS,
    {
      variables: { page: 1 },
    }
  );

  function onClickPage(event) {
      refetch({page: Number(event.target.id)})
  }

  return (
    <>
      <h1>페이지네이션 연습</h1>
      <div>
        {data?.fetchBoards?.map((el) => (
          <div key={el._id}>
            {el.title} {el.writer}
          </div>
        ))}
      </div>
      <span onClick={onClickPage} id = "1"> 1 </span>
      <span onClick={onClickPage} id = "2"> 2 </span>
      <span onClick={onClickPage} id = "3"> 3 </span>
      <span onClick={onClickPage} id = "4"> 4 </span>
      <span onClick={onClickPage} id = "5"> 5 </span>
      <span onClick={onClickPage} id = "6"> 6 </span>
      <span onClick={onClickPage} id = "7"> 7 </span>
      <span onClick={onClickPage} id = "8"> 8 </span>
      <span onClick={onClickPage} id = "9"> 9 </span>
      <span onClick={onClickPage} id = "10"> 10 </span>
    </>
  );
}

그런데 이렇게 하면 10번을 써야되니까 map을 활용해보자

<h1>페이지네이션 연습</h1>
      <div>
        {data?.fetchBoards?.map((el) => (
          <div key={el._id}>
            {el.title} {el.writer}
          </div>
        ))}
      </div>
      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((el) => (
        <span
          key={el}
          onClick={onClickPage}
          id={String(el)}
          style={{ margin: "10px", cursor: "pointer" }}
        >
          {el}
        </span>
      ))}

이렇게 하고 이전페이지 다음페이지 기능은 어떻게 구현할까?

import { gql, useQuery } from "@apollo/client";
import {
  IQuery,
  IQueryFetchBoardsArgs,
} from "../../src/commons/types/generated/types";
const FETCH_BOARDS = gql`
  query fetchBoards($page: Int) {
    fetchBoards(page: $page) {
      _id
      writer
      title
    }
  }
`;

export default function PaignationBasicPage() {
  const [startPage, SetstartPage] = useState(1);

  const { data, refetch } = useQuery<
    Pick<IQuery, "fetchBoards">,
    IQueryFetchBoardsArgs
  >(FETCH_BOARDS, {
    variables: { page: 1 },
  });

  function onClickPage(event) {
    refetch({ page: Number(event.target.id) });
  }

  function onClickNextPage() {
    SetstartPage((prev) => prev + 10);
  }
  function onClickPrevPage() {
    SetstartPage((prev) => prev - 10);
  }

  return (
    <>
      <h1>페이지네이션 연습</h1>
      <div>
        {data?.fetchBoards?.map((el) => (
          <div key={el._id}>
            {el.title} {el.writer}
          </div>
        ))}
      </div>
      <span onClick={onClickPrevPage}>이전페이지</span>
      {new Array(10).fill(1).map((_, index) => (
        <span
          key={startPage + index}
          onClick={onClickPage}
          id={String(startPage + index)}
          style={{ margin: "10px", cursor: "pointer" }}
        >
          {startPage + index}
        </span>
      ))}
      <span onClick={onClickNextPage}>다음페이지</span>
    </>
  );
}

{new Array(10).fill(1).map((_, index) => (
        <span
          key={startPage + index}
          onClick={onClickPage}
          id={String(startPage + index)}
          style={{ margin: "10px", cursor: "pointer" }}
        >
          {startPage + index}
        </span>
      ))}

10개의 배열을 만들고 1로 채우는 함수
new Array(10).fill(1) 자주 쓰일 수 있으니 잘 기억
이후 키를 받은다음 startPage부터 시작+인덱스넘버가 아이디가 되고
onclick에 반응하게 된다. el은 안쓰니 _로 교체

for문으로 교체시 이렇게 된다

이후 페이지가 넘어갈 때 음수나 끝도 없이 다음페이지로 가지 않게 해준다

1. 이전페이지의 경우는 0보다 작아지지 않게 한다.

(1일경우 리턴시켜서 작동하지 않게 하는 모습)
2. 다음페이지의 겨우 마지막 페이지를 계산한다, 전체 게시글 갯수를 알면 됨, 10개씩 나누면되니까
3. Math.ceil로 올림값 해줘야 .남은 게시물 갯수도 맞게 보여준다.
4. startpage+10 많은 페이지가 있어야함, 근데 lastpage가 startpage+10보다 작으면 return 시킴
5. 그래도 숫자는 출력되는데 숫자를 출력되지 않게 하려면?

startPage + index <= lastPage 의 조건을 걸어서 ...?