[React] 페이징

Pagination

import React from 'react';

// 총 항목수, 페이지당 데이터 수 , 현재 페이지번호, 현재 페이지번호 변경
function Pagination({ total, limit, page, setPage, previousPage }) {
    // 총 페이지 수 계산
    const numPages = Math.ceil(total / limit);

    const handlePrevPage = () => {
      setPage(page - 1);
    };

    const handleNextPage = () => {
      setPage(page + 1);
    };

    const handlePageClick = (pageNumber) => {
      setPage(pageNumber);
    };

    return (
        <div className="pagination">
          <ul className="pagination">
            <li className="page-item">
              <button
                className="page-link"
                onClick={handlePrevPage}
                disabled={page === 1}
              >
                &lt;
              </button>
            </li>

            {Array.from({ length: numPages }).map((_, i) => (
              <li
                key={i + 1}
                className={`page-item ${page === i + 1 ? 'active' : ''}`}
              >
                <button
                  className="page-link"
                  onClick={() => handlePageClick(i + 1)}
                  aria-current={page === i + 1 ? "page" : null}
                >
                  {i + 1}
                </button>
              </li>
            ))}

            <li className="page-item">
              <button
                className="page-link"
                onClick={handleNextPage}
                disabled={page === numPages}
              >
                &gt;
              </button>
            </li>
          </ul>
        </div>
      
    )
}

export default Pagination;

List

function ArticleList() {

    const [articles,setArticles] = useState([]);

    const [totalElements, setTotalElements] = useState(0);
    const [limit, setLimit] = useState(0); // 페이지당 보여지는 데이터 수
    const [page, setPage] = useState(1); // 현재 선택된 페이지
    
     useEffect(() => {

        const getArticleList = async (page) => {
            try {
                const response = await customAxios.get(`/api/app/at/index?page=${page}`);
                setArticles(response.data.content);
                setTotalElements(response.data.totalElements);
                setLimit(response.data.size);
                setPage(response.data.pageable.pageNumber + 1);
            } catch (e) {
                console.log(e);
            }
        }
     , [page]);
      
       return (
        <div className="container">
                <Pagination
                    total={totalElements}
                    limit={limit}
                    page={page} // 현재 페이지 값
                    setPage={setPage} // 페이지 값 업데이트
                    onPageChange={handlePageChange}
                />
        </div>

controller

    @GetMapping("index")
    public Page<ArticleDto> search(@PageableDefault(size = 5) Pageable pageable) {

        return amService.getArticleList(pageable);
    }