리액트 페이지네이션 코드

import React, { useState } from 'react';

const itemsPerPage = 10;

function YourComponent({ data }) {
  const [currentPage, setCurrentPage] = useState(1);

  // Calculate the index of the first and last item of the current page
  const indexOfLastItem = currentPage * itemsPerPage;
  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
  const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);

  const handleClick = (index) => {
    // Handle click event, e.g., showing full content of the item
  };

  // Change page
  const handlePageChange = (pageNumber) => setCurrentPage(pageNumber);

  // Generate page numbers based on the number of items
  const totalPages = Math.ceil(data.length / itemsPerPage);
  const pageNumbers = [];
  for (let i = 1; i <= totalPages; i++) {
    pageNumbers.push(i);
  }

  return (
    <div>
      {currentItems.map((value, index) => {
        const today = new Date(value.createdAt);
        return (
          <ul className="custom-contents" key={index}>
            <li className="custom-nm1">{value.id}</li>
            <li className="custom-nm2" onClick={() => handleClick(index)}>
              {value.title}
            </li>
            <li className="custom-nm3">{value.author?.name}</li>
            <li className="custom-nm4">{today.toLocaleDateString()}</li>
            <li className="custom-nm5">123456</li>
          </ul>
        );
      })}

      {/* Render pagination buttons */}
      <div>
        {pageNumbers.map((pageNumber) => (
          <button key={pageNumber} onClick={() => handlePageChange(pageNumber)}>
            {pageNumber}
          </button>
        ))}
      </div>
    </div>
  );
}

export default YourComponent;