[TypeScript] 리액트 페이지네이션

Pagination.tsx 컴포넌트를 만든다

const PaginationWeb = ({ postsPerPage, totalPosts, getCurrentPage }: number |any): JSX.Element => {

  const pageNumbers = [];
  for (let i = 1; i <= Math.ceil(totalPosts / postsPerPage); i++) {
    pageNumbers.push(i);
  }

<div className="pagination" style={Styles.pagination}>
        {pageNumbers.map(number => (
          <li key={number} className="page-item" style={Styles.list}>
            <div
              role="presentation"
              onClick={() => getCurrentPage(number, type)}
              className="page-link"
            >
              {number}
            </div>
          </li>
        ))}
      </div>

컴포넌트를 만든 후에 페이지네이션을 넣을 컴포넌트에

 const LIMIT = 5; //한 페이지 안에 나올 게시글 수 5개
 const [pageIndex, setPageIndex] = useState(1); 첫 번째 페이지를 디폴트로 설정
 const [totalPage, setTotalPage] = useState(1);
  
  
  <div className="pagination">
          <Pagination
            postsPerPage={LIMIT}
            totalPosts={totalPage}
            getCurrentPage={getCurrentPage}
          />
 	</div>

넣어주면

와 같이 페이지네이션이 만들어진다. 게시글이 6개 이상이기 때문에 2페이지가 나왔다.