대량의 데이터를 사용자 친화적인 방식으로 구성하고 표시하면 사용자 경험이 향상됩니다. 이를 위해 사용되는 기술 중 하나가 페이지 매김입니다.

React에서 react-paginate 라이브러리는 구현을 단순화하는 데 도움이 될 수 있습니다.

react-paginate 라이브러리 소개

재액트-페이지네이트 라이브러리를 사용하면 React에서 페이지 매김을 쉽게 렌더링할 수 있습니다. 페이지에 항목을 나열할 수 있으며 페이지 크기, 페이지 범위, 페이지 수와 같은 사용자 정의 가능한 옵션을 제공합니다. 또한 이벤트 핸들러가 내장되어 있어 페이지 변경에 응답하는 코드를 작성할 수 있습니다.

아래에서는 반응 페이지 매김을 사용하여 API에서 검색된 데이터를 페이지 매김하는 방법을 살펴봅니다.

프로젝트 설정하기

시작하려면 create-react-app 명령어 또는 Vite를 사용하여 React 프로젝트를 생성합니다. 이 튜토리얼에서는 Vite를 사용합니다. 이 포스트에서 Vite로 React 프로젝트를 설정하는 방법에 대한 지침을 확인할 수 있습니다.

프로젝트를 생성한 후 App.jsx의 일부 콘텐츠를 삭제하여 이 코드와 일치하도록 합니다:

 function App() {
  return (
    <div> </div>
  );
}

export default App;

이렇게 하면 리액트 페이지네이트 작업을 시작할 수 있는 깨끗한 파일이 생깁니다.

데이터 설정

JSON 플레이스홀더 API에서 데이터를 가져올 것입니다. 이 API는 글, 댓글, 앨범, 사진, 할 일 및 사용자에 대한 엔드포인트를 제공합니다. 글 엔드포인트를 통해 HTTP 클라이언트 라이브러리인 Axios를 사용하여 API에서 데이터를 가져오게 됩니다.

시작하려면 다음 터미널 명령을 사용하여 Axios를 설치하세요:

 npm install axios

그런 다음 App.jsx 상단에서 사용 효과 후크와 axios 라이브러리를 가져온 다음 아래와 같이 API에서 게시물을 가져옵니다.

 import axios from "axios";
import { useEffect, useState } from "react";

function App() {
  const [data, setData] = useState([]);
     
  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts').then((response) => {
      setData(response.data);
    });
  }, []);

  return (
    <div> </div>
  );
}

export default App;

useState 훅은 빈 배열로 data라는 상태 변수를 초기화합니다. API가 글을 반환할 때 setData 함수를 사용하여 상태를 업데이트합니다.

react-paginate로 페이지 매김 구현하기

이제 프로젝트를 설정하고 데이터를 가져왔으니 이제 react-paginate를 사용해 페이지 매김을 추가할 차례입니다. 다음은 따라야 할 단계입니다:

이 글도 확인해 보세요:  Vite 시작하기: 최고의 빌드 툴

react-paginate 설치

다음 명령을 실행하여 npm을 사용하여 react-paginate를 설치합니다.

 npm install react-paginate

페이지의 초기 상태 설정

useState 훅을 사용하여 현재 페이지와 총 페이지 수를 추적합니다.

 const [currentPage, setCurrentPage] = useState(0);
const [totalPages, setTotalPages] = useState(0);

페이지에 포함할 수 있는 총 항목 수 또한 지정해야 합니다.

 const itemsPerPage = 10 

사용 효과 후크에 다음 줄을 추가하여 데이터 길이와 페이지당 항목 수를 기준으로 총 페이지 수를 계산합니다. 그런 다음 총 페이지 수 상태 변수에 저장합니다.

 setTotalPages(Math.ceil(response.data.length / itemsPerPage));

이제 사용 효과 후크가 다음과 같이 표시되어야 합니다:

 useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts').then((response) => {
      setData(response.data);
      setTotalPages(Math.ceil(response.data.length / itemsPerPage))
    });
  }, []);

페이지 변경을 처리하는 함수 정의

먼저 현재 페이지 번호를 기준으로 데이터의 하위 집합을 렌더링하기 위해 startIndex, endIndex 및 subset 변수를 정의합니다.

 const startIndex = currentPage * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
const subset = data.slice(startIndex, endIndex);

이 코드는 currentPage 상태 값과 itemsPerPage 값을 기반으로 startIndex 및 endIndex 값을 계산합니다. 그런 다음 이 변수를 사용하여 데이터 배열을 항목의 하위 집합으로 분할합니다.

그런 다음 핸들 페이지 변경 함수를 추가합니다. 이 함수는 사용자가 다음 버튼을 클릭할 때 실행되는 이벤트 핸들러입니다.

 const handlePageChange = (selectedPage) => {
    setCurrentPage(selectedPage.selected);
};

전체적으로 애플리케이션은 다음과 같아야 합니다:

 import axios from "axios";
import { useEffect, useState } from "react";

function App() {
  const [data, setData] = useState([]);
  const [currentPage, setCurrentPage] = useState(0);
  const [totalPages, setTotalPages] = useState(0);
  const itemsPerPage = 10;

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts/').then((response) => {
      setData(response.data);
    });

    setTotalPages(Math.ceil(response.data.length / itemsPerPage));
  }, []);

  const startIndex = currentPage * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  const subset = data.slice(startIndex, endIndex);

  const handlePageChange = (selectedPage) => {
    setCurrentPage(selectedPage.selected);
  };

  return (
    <div> </div>
  );
}

export default App;

페이지 매김 추가

마지막 단계는 ReactPaginate 컴포넌트를 사용하여 페이지를 렌더링하는 것입니다. 빈 div를 대체하여 반환 문에 다음을 추가합니다.

 <div>
    {subset.map((item) => (
        <div key={item.id}>{item.title}</div>
    ))}
    <ReactPaginate
        pageCount={totalPages}
        onPageChange={handlePageChange}
        forcePage={currentPage}
    />
</div>

현재 하위 집합의 항목을 반복하고 렌더링한 후 pageCount, onPageChange, forceChange 프로퍼티를 ReactPaginate로 전달합니다.

이 글도 확인해 보세요:  JES에서 사운드를 임포트하고 재생하는 방법

재액트 페이지네이트 사용자 정의

재액트 페이지네이트는 애플리케이션의 필요에 맞게 페이지 매김 컴포넌트의 모양과 느낌을 사용자 정의할 수 있는 몇 가지 프로퍼티를 제공합니다.

다음은 몇 가지 예시입니다.

이전 레이블 및 다음 레이블 프롭을 사용하여 다음 및 이전 버튼을 사용자 지정합니다. 예를 들어 아래와 같이 셰브론 레이블을 사용할 수 있습니다.

 <ReactPaginate
  previousLabel={"<<"}
  nextLabel={">>"}
/>

⭐ breakLabel 프롭을 사용하여 중단 레이블을 사용자 지정합니다. 나누기 레이블은 페이지 수가 많아 페이지 매김 구성 요소가 모든 페이지 링크를 표시할 수 없을 때 표시되는 레이블입니다. 대신 링크 사이에 나누기 레이블로 표시되는 나누기를 표시합니다. 다음은 줄임표를 사용하는 예입니다.

 <ReactPaginate
  breakLabel={"..."}
/>

⭐ 표시할 페이지 수를 사용자 지정합니다. 모든 페이지를 표시하지 않으려는 경우 페이지 카운트 프로퍼티를 사용하여 페이지 수를 지정할 수 있습니다.

 <ReactPaginate
  pageCount={5}
/>

⭐ 컨테이너 및 활성 클래스 사용자 지정하기. containerClassName 및 activeClassName 프롭을 사용하여 페이지 매김 컨테이너 및 활성 페이지 링크의 클래스 이름을 각각 사용자 지정할 수 있습니다. 그런 다음 앱의 모양에 맞을 때까지 이러한 클래스를 사용하여 페이지 매김 구성 요소의 스타일을 지정할 수 있습니다.

 <ReactPaginate
  containerClassName={"pagination-container"}
  activeClassName={"active-page"}
/>

이것은 사용 가능한 사용자 정의 옵션의 전체 목록이 아닙니다. 나머지는 리액트 페이지네이트 라이브러리 문서 에서 찾을 수 있습니다.

페이지 매김을 사용하여 사용자 경험 개선

페이지 매김은 많은 양의 데이터를 표시하는 모든 애플리케이션에서 중요한 기능입니다. 페이지 매김이 없으면 사용자는 필요한 정보를 찾기 위해 긴 목록을 스크롤해야 하므로 시간이 많이 걸립니다.

페이지 매김을 사용하면 데이터를 더 작고 관리하기 쉬운 덩어리로 분할하여 사용자가 원하는 특정 데이터를 쉽게 탐색할 수 있습니다. 이렇게 하면 시간이 절약될 뿐만 아니라 사용자가 정보를 더 쉽게 처리할 수 있습니다.

By 최은지

윈도우(Windows)와 웹 서비스에 대한 전문 지식을 갖춘 노련한 UX 디자이너인 최은지님은 효율적이고 매력적인 디지털 경험을 개발하는 데 탁월한 능력을 발휘합니다. 사용자의 입장에서 생각하며 누구나 쉽게 접근하고 즐길 수 있는 콘텐츠를 개발하는 데 주력하고 있습니다. 사용자 경험을 향상시키기 위해 연구를 거듭하는 은지님은 All Things N 팀의 핵심 구성원으로 활약하고 있습니다.