Pagination(2) 현 페이지 기준 좌우 2개 페이지 버튼 보이기..

기존의 버튼을 리턴하는 함수에서 이 부분만 추가해 주었다.

📗 아예 페이징처리를 하는 부분이 처음부터 궁금하다면

Additional code

let startPage = Math.max(1, props.page - Math.floor(maxPageButtons / 2)); // show start page button
let endPage = Math.min(startPage + maxPageButtons - 1, pageLength); // show end page button

if (endPage - startPage + 1 < maxPageButtons) {
  startPage = Math.max(1, endPage - maxPageButtons + 1);
}

Full func code

  const renderPageNumbers = () => {
    const pageNumber = [];
    //
    const maxPageButtons = 5; // show page button count (5)

    let startPage = Math.max(1, props.page - Math.floor(maxPageButtons / 2)); // show start page button
    let endPage = Math.min(startPage + maxPageButtons - 1, pageLength); // show end page button
    if (endPage - startPage + 1 < maxPageButtons) {
      startPage = Math.max(1, endPage - maxPageButtons + 1);
    }

    for (let i = startPage; i <= endPage; i++) {
      pageNumber.push(
        <PageButton
          key={i}
          onClick={() => onClickPageBtn(i)}
          active={props.page == i}
        >
          {i}
        </PageButton>
      );
    }
    return pageNumber;
  };

위 코드는 현재 페이지(props.page)를 중심으로 좌우로 maxPageButtons / 2 개의 페이지 버튼을 생성하도록 하고 있습니다. 그러나 이 때, 첫 페이지나 마지막 페이지일 경우 버튼이 부족해질 수 있다.
따라서 위 코드에서는 먼저 startPage와 endPage값을 계산해야한다.
startPage는 최소값이 1이 되도록 하고, endPage는 최대값이 전체 페이지 수(pageLength)가 되도록 해야한다.
그런 다음, endPage - startPage + 1이 maxPageButtons보다 작을 경우에는 startPage값을 재계산한다.
이때 startPage는 최소값이 1이 되도록 하고, endPage는 maxPageButtons개의 버튼이 포함될 수 있도록 계산해야한다.
이렇게 하면 항상 maxPageButtons개의 페이지 버튼이 생성되며, 첫 페이지나 마지막 페이지에서도 문제없이 동작이 된다.

result