[React]페이지네이션

개요

리액트(React)로 페이지네이션 컴포넌트를 만드는 방법에 대해 알아보겠습니다. 페이지네이션은 데이터를 여러 페이지에 나누어 보여줄 때 사용하는 기능으로, 사용자 경험을 향상시킬 수 있습니다. 이번 블로그에서는 리액트에서 페이지네이션을 구현하는 예시 코드를 작성하고, 각 부분에 대해 자세히 설명하겠습니다.

페이지네이션 컴포넌트 개요

페이지네이션 컴포넌트는 기본적으로 다음과 같은 기능을 포함합니다:

• 현재 페이지: 사용자가 현재 보고 있는 페이지를 나타냅니다.
• 페이지 변경: 사용자가 페이지 번호를 클릭하면 해당 페이지로 이동합니다.
• 이전 및 다음 버튼: 사용자가 이전 페이지나 다음 페이지로 이동할 수 있도록 합니다.
• 페이지 수 계산: 전체 데이터 수와 한 페이지에 보여줄 데이터의 수를 기반으로 총 페이지 수를 계산합니다.

예시코드

import React, { useState } from 'react';

// Pagination 컴포넌트
const Pagination = ({ totalItems, itemsPerPage, currentPage, onPageChange }) => {
  const totalPages = Math.ceil(totalItems / itemsPerPage);

  const handleClick = (page) => {
    onPageChange(page);
  };

  const handlePrevious = () => {
    if (currentPage > 1) {
      onPageChange(currentPage - 1);
    }
  };

  const handleNext = () => {
    if (currentPage < totalPages) {
      onPageChange(currentPage + 1);
    }
  };

  return (
    <div className="pagination">
      <button onClick={handlePrevious} disabled={currentPage === 1}>
        이전
      </button>
      {Array.from({ length: totalPages }, (_, index) => (
        <button
          key={index}
          onClick={() => handleClick(index + 1)}
          className={currentPage === index + 1 ? 'active' : ''}
        >
          {index + 1}
        </button>
      ))}
      <button onClick={handleNext} disabled={currentPage === totalPages}>
        다음
      </button>
    </div>
  );
};

// App 컴포넌트 (예시 사용법)
const App = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const totalItems = 50;  // 총 데이터 수
  const itemsPerPage = 10;  // 페이지당 보여줄 데이터 수

  const handlePageChange = (page) => {
    setCurrentPage(page);
  };

  return (
    <div className="App">
      <h1>리액트 페이지네이션 컴포넌트</h1>
      <Pagination
        totalItems={totalItems}
        itemsPerPage={itemsPerPage}
        currentPage={currentPage}
        onPageChange={handlePageChange}
      />
    </div>
  );
};

export default App;

Pagination 컴포넌트

Pagination 컴포넌트는 페이지네이션 기능을 담당합니다. 이 컴포넌트는 총 데이터 수(totalItems), 페이지당 데이터 수(itemsPerPage), 현재 페이지(currentPage), 페이지 변경 핸들러(onPageChange)를 props로 받습니다.

• totalPages 계산:

const totalPages = Math.ceil(totalItems / itemsPerPage);

전체 페이지 수(totalPages)는 총 데이터 수(totalItems)를 페이지당 데이터 수(itemsPerPage)로 나눈 값을 올림 처리하여 계산합니다.

• handleClick 함수:

const handleClick = (page) => {
  onPageChange(page);
};

페이지 번호를 클릭하면 호출되는 함수로, onPageChange 함수를 호출하여 부모 컴포넌트(App 컴포넌트)에 페이지 변경을 알립니다.

• handlePrevious 함수:

const handlePrevious = () => {
  if (currentPage > 1) {
    onPageChange(currentPage - 1);
  }
};

"이전" 버튼을 클릭했을 때 호출되는 함수입니다. 현재 페이지가 1보다 큰 경우에만 onPageChange를 호출하여 이전 페이지로 이동합니다.

• handleNext 함수:

const handleNext = () => {
  if (currentPage < totalPages) {
    onPageChange(currentPage + 1);
  }
};

"다음" 버튼을 클릭했을 때 호출되는 함수입니다. 현재 페이지가 전체 페이지 수보다 작은 경우에만 onPageChange를 호출하여 다음 페이지로 이동합니다.

• 버튼 렌더링:

{Array.from({ length: totalPages }, (_, index) => (
  <button
    key={index}
    onClick={() => handleClick(index + 1)}
    className={currentPage === index + 1 ? 'active' : ''}
  >
    {index + 1}
  </button>
))}

전체 페이지 수만큼 버튼을 생성하여 화면에 렌더링합니다. 현재 페이지와 일치하는 버튼에는 active 클래스를 추가하여 스타일을 다르게 적용할 수 있습니다.

App 컴포넌트

App 컴포넌트는 Pagination 컴포넌트를 사용하는 예시입니다. App 컴포넌트는 상태(currentPage)를 관리하고, 페이지 변경 이벤트를 처리합니다.

• 상태 관리:

const [currentPage, setCurrentPage] = useState(1);

현재 페이지를 상태로 관리하기 위해 useState 훅을 사용합니다. 초기값은 1로 설정합니다.

• andlePageChange 함수:

const handlePageChange = (page) => {
  setCurrentPage(page);
};

페이지가 변경될 때 호출되는 함수로, 현재 페이지 상태를 업데이트합니다.

주요 기능

• /다음 버튼: currentPage가 1일 때 "이전" 버튼이 비활성화되고, currentPage가 totalPages와 같을 때 "다음" 버튼이 비활성화됩니다.
• 지 번호 클릭: 각 페이지 번호 버튼을 클릭하면 해당 페이지로 이동합니다.
• 페이지 강조: 현재 페이지에 해당하는 버튼은 active 클래스를 통해 스타일링할 수 있습니다.

마무리

리액트로 간단한 페이지네이션 컴포넌트를 구현하는 방법을 다뤘습니다. 페이지네이션은 데이터를 사용자에게 더 나은 방식으로 제공하기 위해 필요한 중요한 UI 요소 중 하나입니다. 예시 코드를 통해 페이지네이션의 기본적인 원리를 이해하고, 이를 실제 프로젝트에 응용할 수 있을 것입니다. 필요한 경우, 더 많은 기능(예: 페이지 그룹, 첫 페이지/마지막 페이지 버튼 등)을 추가하여 확장할 수 있습니다.