Custom Hook을 활용한 페이징 처리 기능 추가하기

06 Nov 2023

reactjs

이번에는 React 애플리케이션에 페이징 처리 기능을 추가해보려고 합니다. 이를 위해 Custom Hook을 사용하여 간편하게 구현해보겠습니다.

1. Custom Hook 생성하기

먼저, usePagination이라는 Custom Hook을 만들어보겠습니다. 이 Hook은 현재 페이지 번호와 전체 항목 수, 페이지당 항목 수를 관리하고, 페이지 변경 및 이전/다음 페이지 이동을 처리합니다.

import { useState, useEffect } from 'react';

const usePagination = (totalItems, itemsPerPage) => {
  const [currentPage, setCurrentPange] = useState(1);
  const [totalPages, setTotalPages] = useState(1);

  useEffect(() => {
    setTotalPages(Math.ceil(totalItems / itemsPerPage));
  }, [totalItems, itemsPerPage]);

  const nextPage = () => {
    if (currentPage < totalPages) {
      setCurrentPage(currentPage + 1);
    }
  };

  const prevPage = () => {
    if (currentPage > 1) {
      setCurrentPage(currentPage - 1);
    }
  };

  return {
    currentPage,
    totalPages,
    nextPage,
    prevPage,
  };
};

export default usePagination;

2. 페이징 컴포넌트 작성하기

이제 실제로 페이지 번호와 페이지 이동 버튼을 보여주는 Pagination 컴포넌트를 작성해보겠습니다.

import React from 'react';
import usePagination from './usePagination';

const Pagination = ({ totalItems, itemsPerPage }) => {
  const { currentPage, totalPages, nextPage, prevPage } = usePagination(totalItems, itemsPerPage);

  return (
    <div>
      <button onClick={prevPage} disabled={currentPage === 1}>Previous</button>
      <span>{currentPage} / {totalPages}</span>
      <button onClick={nextPage} disabled={currentPage === totalPages}>Next</button>
    </div>
  );
};

export default Pagination;

3. 페이지 컴포넌트에 페이징 컴포넌트 추가하기

이제 페이징 컴포넌트를 사용하는 페이지 컴포넌트에 페이징 컴포넌트를 추가해보겠습니다.

import React from 'react';
import Pagination from './Pagination';

const Page = () => {
  const totalItems = 100; // 총 항목 수
  const itemsPerPage = 10; // 페이지당 항목 수

  // 페이지 컴포넌트의 내용 작성

  return (
    <div>
      {/* 페이지 컴포넌트 내용 작성 */}
      <Pagination totalItems={totalItems} itemsPerPage={itemsPerPage} />
    </div>
  );
};

export default Page;

위 예시에서는 페이징 컴포넌트를 <Pagination> 태그로 불러와 사용하고 있습니다. 이를 원하는 페이지 컴포넌트에 적용하여 페이징 처리 기능을 간단하게 추가할 수 있습니다.

이렇게 Custom Hook을 활용하면 React 애플리케이션에 페이징 처리 기능을 쉽게 구현할 수 있습니다.

#react #custom-hook