PagiNation.js 만들기

React에서 pagination을 구현하려면 몇 가지 단계를 따라야 합니다. 먼저, 데이터를 가져와서 페이지 단위로 나누어야 하며, 그 다음에는 현재 페이지에 해당하는 데이터만 렌더링하도록 처리해야 합니다. 아래는 간단한 예제 코드입니다.

1. 데이터 가져오기 및 페이지 단위로 나누기:

// App.js

import React, { useState, useEffect } from 'react';
import Card from './Card';

const App = () => {
  const [data, setData] = useState([]); // 전체 데이터
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage] = useState(10); // 페이지당 아이템 수

  // 데이터를 가져오는 useEffect 등을 사용하여 데이터를 가져옴

  useEffect(() => {
    // 데이터를 가져오는 비동기 함수 호출
    const fetchData = async () => {
      // 데이터를 가져와서 setData로 설정
      const result = await fetchDataFromAPI();
      setData(result);
    };

    fetchData();
  }, []);

  // 전체 데이터를 현재 페이지에 맞게 자르기
  const indexOfLastItem = currentPage * itemsPerPage;
  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
  const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);

  // 페이지 번호를 클릭했을 때 호출되는 함수
  const handlePageClick = (pageNumber) => {
    setCurrentPage(pageNumber);
  };

  return (
    <div>
      {currentItems.map((item) => (
        <Card key={item.id} data={item} />
      ))}
      <Pagination
        itemsPerPage={itemsPerPage}
        totalItems={data.length}
        currentPage={currentPage}
        onPageClick={handlePageClick}
      />
    </div>
  );
};

export default App;

2. Pagination 컴포넌트 만들기:

// Pagination.js

import React from 'react';

const Pagination = ({ itemsPerPage, totalItems, currentPage, onPageClick }) => {
  const pageNumbers = [];

  for (let i = 1; i <= Math.ceil(totalItems / itemsPerPage); i++) {
    pageNumbers.push(i);
  }

  return (
    <div>
      {pageNumbers.map((number) => (
        <button key={number} onClick={() => onPageClick(number)}>
          {number}
        </button>
      ))}
    </div>
  );
};

export default Pagination;

위 코드에서 fetchDataFromAPI는 실제 데이터를 가져오는 함수로 대체되어야 합니다. 또한 Card 컴포넌트와 스타일을 적절히 수정하여 프로젝트에 맞게 사용하시면 됩니다.