React에서 Pagination 컴포넌트 만들기

 

대부분의 웹 애플리케이션에서는 데이터가 너무 많아서 한 페이지에 모두 표시하기 어려운 경우가 많습니다. 이럴 때 **페이지네이션(Pagination)**을 사용하여 데이터를 여러 페이지로 나누어 사용자에게 보여주는 것이 일반적입니다. 페이지네이션을 구현하면, 사용자가 데이터의 일부만을 보고 필요한 데이터를 쉽게 찾을 수 있게 도와줍니다.

React에서는 페이지네이션 컴포넌트를 만들기 위한 다양한 방법이 있지만, 이 글에서는 React의 함수형 컴포넌트를 사용하여 상태 관리와 UI 구성을 고려한 페이지네이션 컴포넌트를 어떻게 만들 수 있는지 자세히 설명합니다.

1. 페이지네이션(Pagination)의 기본 개념

페이지네이션은 데이터를 여러 페이지로 나누어 보여주는 기술입니다. 예를 들어, 100개의 아이템이 있을 때, 한 페이지에 10개씩 나누어 10개의 페이지를 만들 수 있습니다. 이를 통해 사용자는 한 번에 많은 양의 데이터를 보지 않고, 페이지를 전환하며 데이터를 확인할 수 있습니다.

기본적으로 페이지네이션은 두 가지 중요한 요소로 구성됩니다:

• 현재 페이지: 사용자가 보고 있는 페이지 번호.
• 페이지 크기: 한 페이지에 표시되는 항목 수.

2. 페이지네이션을 구현하기 위한 기본 구조

페이지네이션을 구현하는 주요 요소는 다음과 같습니다:

• 현재 페이지 표시: 현재 사용자가 보고 있는 페이지 번호를 추적합니다.
• 페이지 크기 설정: 한 페이지에 몇 개의 항목을 표시할지 설정합니다.
• 페이지 이동 버튼: 사용자가 다른 페이지로 이동할 수 있는 버튼들입니다.
• 총 페이지 수: 전체 데이터를 기준으로 몇 페이지가 필요한지 계산합니다.

3. React로 페이지네이션 컴포넌트 만들기

이제 React에서 페이지네이션 컴포넌트를 만드는 방법을 단계별로 살펴보겠습니다.

3.1. 기본적인 컴포넌트 구조

우리는 먼저 페이지네이션 컴포넌트의 기본적인 UI와 상태를 정의합니다. 이 컴포넌트는 currentPage, totalItems, itemsPerPage 등을 상태로 관리하며, 페이지를 전환할 수 있는 버튼을 제공합니다.

기본 코드 예시:

import React, { useState } from 'react';

const Pagination = ({ totalItems, itemsPerPage, onPageChange }) => {
  const [currentPage, setCurrentPage] = useState(1);

  // 총 페이지 수 계산
  const totalPages = Math.ceil(totalItems / itemsPerPage);

  // 페이지 이동 함수
  const handlePageChange = (page) => {
    setCurrentPage(page);
    onPageChange(page); // 부모 컴포넌트에 페이지 변경 알림
  };

  // 이전 페이지로 이동
  const handlePrevPage = () => {
    if (currentPage > 1) {
      handlePageChange(currentPage - 1);
    }
  };

  // 다음 페이지로 이동
  const handleNextPage = () => {
    if (currentPage < totalPages) {
      handlePageChange(currentPage + 1);
    }
  };

  return (
    <div className="pagination">
      <button onClick={handlePrevPage} disabled={currentPage === 1}>
        이전
      </button>
      <span>{currentPage} / {totalPages}</span>
      <button onClick={handleNextPage} disabled={currentPage === totalPages}>
        다음
      </button>
    </div>
  );
};

export default Pagination;

3.2. 주요 기능 설명

1. 상태 관리: useState 훅을 사용하여 currentPage 상태를 관리합니다. currentPage는 현재 페이지 번호를 추적합니다.
2. 총 페이지 수 계산: Math.ceil(totalItems / itemsPerPage)로 전체 아이템 수와 한 페이지에 표시할 아이템 수를 바탕으로 총 페이지 수를 계산합니다.
3. 페이지 이동: handlePageChange 함수는 페이지 번호를 변경하고, 부모 컴포넌트로 변경된 페이지 번호를 전달합니다.
4. 이전/다음 버튼: handlePrevPage와 handleNextPage 함수는 각각 페이지를 이전이나 다음으로 이동시키는 역할을 합니다. 버튼은 현재 페이지에 따라 활성화되거나 비활성화됩니다.

3.3. 부모 컴포넌트에서 페이지네이션 사용

이제 부모 컴포넌트에서 Pagination 컴포넌트를 어떻게 사용할 수 있는지 살펴보겠습니다. 부모 컴포넌트는 Pagination 컴포넌트의 onPageChange 이벤트를 통해 현재 페이지 번호를 전달받고, 해당 페이지에 맞는 데이터를 렌더링합니다.

부모 컴포넌트 코드 예시:

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

const App = () => {
  const [data, setData] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 10; // 한 페이지에 10개씩 표시

  // 더미 데이터 생성
  const fetchData = () => {
    const totalItems = 100; // 예시로 100개의 아이템
    const newData = Array.from({ length: totalItems }, (_, index) => `아이템 ${index + 1}`);
    setData(newData);
  };

  // 페이지 변경 시 해당 페이지의 데이터만 필터링
  const getPaginatedData = () => {
    const startIndex = (currentPage - 1) * itemsPerPage;
    return data.slice(startIndex, startIndex + itemsPerPage);
  };

  // 페이지가 변경될 때마다 currentPage 업데이트
  const handlePageChange = (page) => {
    setCurrentPage(page);
  };

  useEffect(() => {
    fetchData(); // 컴포넌트 마운트 시 데이터 가져오기
  }, []);

  return (
    <div>
      <h1>페이지네이션 예시</h1>
      <ul>
        {getPaginatedData().map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <Pagination
        totalItems={data.length}
        itemsPerPage={itemsPerPage}
        onPageChange={handlePageChange}
      />
    </div>
  );
};

export default App;

3.4. 부모 컴포넌트 주요 설명

1. 데이터 생성 및 필터링: fetchData 함수에서 더미 데이터를 생성하고, getPaginatedData 함수에서 현재 페이지에 맞는 데이터를 추출합니다.
2. 페이지 변경 처리: handlePageChange 함수는 Pagination 컴포넌트에서 발생하는 페이지 변경 이벤트를 처리하여 currentPage를 업데이트합니다.
3. 페이지네이션 표시: 페이지네이션 컴포넌트를 렌더링하며, totalItems와 itemsPerPage를 전달합니다. onPageChange로 페이지 변경을 부모 컴포넌트로 전달합니다.

3.5. 스타일링 추가

간단한 스타일을 추가하여 페이지네이션 컴포넌트를 더 직관적으로 만들 수 있습니다.

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pagination button {
  padding: 5px 10px;
  margin: 0 5px;
  font-size: 16px;
  cursor: pointer;
}

.pagination button:disabled {
  cursor: not-allowed;
  background-color: #f0f0f0;
}

.pagination span {
  font-size: 16px;
  align-self: center;
}

3.6. 개선 사항 및 추가 기능

1. 더 많은 페이지 이동 옵션: 이전, 다음 외에도 "처음", "끝"으로 이동할 수 있는 버튼을 추가할 수 있습니다.
2. 페이지 번호 직접 입력: 사용자가 직접 페이지 번호를 입력하여 이동할 수 있는 기능을 추가할 수 있습니다.
3. 동적 데이터: API에서 데이터를 불러와서 동적으로 페이지네이션을 적용하는 경우에도 비슷한 방식으로 구현할 수 있습니다.

4. 결론

이 글에서는 React로 페이지네이션 컴포넌트를 만드는 방법을 단계별로 살펴보았습니다. 페이지네이션을 통해 사용자는 데이터를 페이지 단위로 나누어 쉽게 탐색할 수 있으며, React의 상태 관리와 이벤트 처리 기능을 이용하여 효율적으로 페이지네이션을 구현할 수 있습니다. 페이지네이션 컴포넌트는 특히 목록을 다룰 때 유용하며, 다양한 추가 기능을 통해 더욱 향상시킬 수 있습니다.