[React] pagination Component 만들기

[React] pagination Component 만들기

---

[ App.jsx ]

// state변수 설정
const [currPage, setCurrPage] = useState(0);

[ Pagination.jsx ] - 페이지리스트 배열 만들기.

const MAX_PAGE_COUNT = 10; // MAX_PAGE_COUNT -> 한번에 보여지는 페이지 수,
let resultList = [];
function getPaginationArray(currPage, pageCount) {
  // 1, 11, 21 ... 페이지가 선택될 때 ,
  // 1~10, 11~20, 21~30 ... 리스트 생성
  if ((currPage + 1) % MAX_PAGE_COUNT === 1) {
    let idx = 1;
    resultList = [currPage];
    while (resultList.length < MAX_PAGE_COUNT && currPage + idx < pageCount) {
      resultList.push(currPage + idx);
      idx++;
    }
    // 9, 19, 29 ... 페이지가 선택될 때,
    // 1~10, 11~20, 21~30 ... 리스트 생성
  } else if (currPage % MAX_PAGE_COUNT === MAX_PAGE_COUNT - 1) {
    let idx = 1;
    resultList = [currPage];
    while (resultList.length < MAX_PAGE_COUNT) {
      resultList.unshift(currPage - idx);
      idx++;
    }
  }
  return resultList;
}

[ Pagination.jsx ] - 컴포넌트 구성

// 이전페이지 버튼
<ArrowWrapper onClick={() => currPage > 0 && onClickPage(currPage - 1)} disabled={currPage <= 0}>
  <Arrow />
</ArrowWrapper>;
// 페이지리스트를 받아서 map함수를 이용해 불러온다.
{
  getPaginationArray(currPage, pageCount).map((page) => {
    return (
      <Button
        onClick={() => onClickPage(page)}
        key={`page-button-${page}`}
        active={page === currPage}
      >
        {page + 1}
      </Button>
    );
  });
}
// 다음페이지 버튼
<ArrowWrapper
  flip
  onClick={() => currPage < pageCount - 1 && onClickPage(currPage + 1)}
  disabled={currPage >= pageCount - 1}
>
  <Arrow />
</ArrowWrapper>;

[ 결과 ]