React에서 간단한 페이지 매김 구성 요소를 만드는 방법

ReactJS는 모듈화된 애플리케이션을 작성하는 데 널리 사용되는 프런트엔드 프레임워크였습니다. 페이지 매김은 특히 React 애플리케이션을 모듈화할 때 발생하는 문제 중 하나입니다. 페이지 매김은 다양한 접근 방식을 사용하여 구현할 수 있지만, 기본적으로 페이지 매김을 제공하는 깔끔한 반응 구성 요소가 있으면 좋을 것이라고 생각했습니다. 이렇게 하면 가능한 많은 구현 세부 사항으로부터 사용자를 보호하면서 개발 프로세스를 유동적으로 만들 수 있습니다.

Sweet Pagination은 몇 가지 유용한 기능을 갖춘 간단한 페이지 매김 구성 요소입니다. 라이브러리는 기본적으로 작동하며 복잡한 구성이 없습니다. React 구성 요소에 스타일을 추가하는 방법을 알면 추가 사용자 정의가 쉬워집니다.

사용 방법:

1. 페이지 매김 구성 요소를 설치하고 가져옵니다.

import React, { useState } from "react";
import SweetPagination from "sweetpagination";

2. 대규모 데이터에 대한 기본 페이지 매김 컨트롤을 렌더링합니다.

function Items() {
  const [currentPageData, setCurrentPageData] = useState(new Array(2).fill());
  // Example items, to simulate fetching from another resources.
  const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
  return (
    <div>
      {currentPageData.map((item) => (
        <div>
          <h3>Item #{item}</h3>
        </div>
      ))}
      <SweetPagination
        currentPageData={setCurrentPageData}
        getData={items}
        navigation={true}
        dataPerPage={10}
        getStyle={'my-style'}
      />
    </div>
  );
}

시사:

GitHub에서 보기: https://github.com/jahidulislamzim/sweetpagination