[React] Paging

1. 부모 컴포넌트로부터 Paging 컴포넌트에 prop 받기

const Paging = ({ handlePageChange, totalCount, currentPage }) => {
	
}

• `handlePageChange` : 페이지를 변경하는 함수
• `totalCount` : 전체 항목의 갯수
• `currentPage` :  현재 페이지 번호

---

2. 페이지 제한과 전체 페이지 계산

const pageLimit = 5; // 보여줄 페이지 버튼 수
const totalPages = Math.ceil(totalCount / 10); // 전체 페이지 수 계산

• `pageLimit` : 화면에 보여줄 페이지 번호 버튼의 갯수를 5개로 제한합니다.
• `totalPages` : 전체 상품 수(`totalCount`)를 10으로 나누어 한 페이지에 10개의 상품이 표시될 수 있도록 계산합니다. 결과적으로 `totalCount`에 따라 몇개의 페이지가 필요한지 계산됩니다.

---

3. 페이지 범위 계산

const startPage = Math.floor((currentPage - 1) / pageLimit) * pageLimit + 1;
const endPage = Math.min(startPage + pageLimit - 1, totalPages);

• `startPage` : 현재 페이지가 속한 페이지 그룹의 첫 페이지 번호를 계산합니다. 예를 들어, `currentPage`가 6이면 6~10 페이지 구룹에 속하므로 `startPage`는 6이 됩니다.
• `endPage` : `startPage`부터 시작해 `PageLimit` 수 만큼 페이지 번호를 계산합니다. 하지만 마지막 페이지 번호는 전체 페이지 수를 넘지 않도록 `totalPages`와 비교해 작은 값을 선택합니다.

---

4. 페이지 UI 구성

<li className="prev">
  <button
    onClick={() => handlePageChange(Math.max(currentPage - 1, 1))}
    disabled={currentPage === 1}
  ></button>
</li>

 

이전 버튼 `prev` : 사용자가 이전 페이지로 이동할 수 있는 버튼입니다. 현재 페이지가 첫 번째 페이지 `currentPage === 1`일 경우 비활성화`disabled` 됩니다. 버튼을 클릭하면 `currentPage`가 1보다 작아지지 않도록 `Math.max()`로 제한하여 이전 페이지로 이동하게 됩니다.

---

5. 동적 페이지 버튼 생성

{Array.from({ length: endPage - startPage + 1 }, (_, index) => (
  <li
    key={startPage + index}
    className={currentPage === startPage + index ? "active" : ""}
  >
    <button onClick={() => handlePageChange(startPage + index)}>
      {startPage + index}
    </button>
  </li>
))}

• `Array.from`을 사용해 `startPage`부터 `endPage`까지의 페이지 번호를 동적으로 생성합니다.
• 각 페이지 번호는 `li`태그 안에 렌더링 되며, 현재 페이지와 일치하는 경우 `active` 클래스를 추가하여 스타일링을 적용합니다.
• 사용자가 각 페이지 버튼을 클릭하면 `handlePageChange`함수를 호출하여 페이지로 이동합니다.

---

6. 다음 버튼

<li className="next">
  <button
    onClick={() =>
      handlePageChange(Math.min(currentPage + 1, totalPages))
    }
    disabled={currentPage === totalPages}
  ></button>
</li>

 

다음 버튼`next` : 다음 페이지로 이동할 수 있는 버튼입니다. `currentPage`가 마지막 페이지일 경우 비활성화됩니다. 클릭 시 `currentPage + 1`로 이동하지만, 마지막 페이지 `totalPages`를 넘지 않도록 `Math.min()`을 사용해 제한합니다.

---

위 Paging 기능은 headlePageChange 함수와 페이지 정보 `currentPage`, 전체 항목 수 `totalCount`를 props로 전달받아야 페이지 변경 기능을 동작시킵니다.