대량의 데이터를 사용자 친화적인 방식으로 구성하고 표시하면 사용자 경험이 향상됩니다. 이를 위해 사용되는 기술 중 하나가 페이지 매김입니다.
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를 사용해 페이지 매김을 추가할 차례입니다. 다음은 따라야 할 단계입니다:
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로 전달합니다.
재액트 페이지네이트 사용자 정의
재액트 페이지네이트는 애플리케이션의 필요에 맞게 페이지 매김 컴포넌트의 모양과 느낌을 사용자 정의할 수 있는 몇 가지 프로퍼티를 제공합니다.
다음은 몇 가지 예시입니다.
이전 레이블 및 다음 레이블 프롭을 사용하여 다음 및 이전 버튼을 사용자 지정합니다. 예를 들어 아래와 같이 셰브론 레이블을 사용할 수 있습니다.
<ReactPaginate
previousLabel={"<<"}
nextLabel={">>"}
/>
⭐ breakLabel 프롭을 사용하여 중단 레이블을 사용자 지정합니다. 나누기 레이블은 페이지 수가 많아 페이지 매김 구성 요소가 모든 페이지 링크를 표시할 수 없을 때 표시되는 레이블입니다. 대신 링크 사이에 나누기 레이블로 표시되는 나누기를 표시합니다. 다음은 줄임표를 사용하는 예입니다.
<ReactPaginate
breakLabel={"..."}
/>
⭐ 표시할 페이지 수를 사용자 지정합니다. 모든 페이지를 표시하지 않으려는 경우 페이지 카운트 프로퍼티를 사용하여 페이지 수를 지정할 수 있습니다.
<ReactPaginate
pageCount={5}
/>
⭐ 컨테이너 및 활성 클래스 사용자 지정하기. containerClassName 및 activeClassName 프롭을 사용하여 페이지 매김 컨테이너 및 활성 페이지 링크의 클래스 이름을 각각 사용자 지정할 수 있습니다. 그런 다음 앱의 모양에 맞을 때까지 이러한 클래스를 사용하여 페이지 매김 구성 요소의 스타일을 지정할 수 있습니다.
<ReactPaginate
containerClassName={"pagination-container"}
activeClassName={"active-page"}
/>
이것은 사용 가능한 사용자 정의 옵션의 전체 목록이 아닙니다. 나머지는 리액트 페이지네이트 라이브러리 문서 에서 찾을 수 있습니다.
페이지 매김을 사용하여 사용자 경험 개선
페이지 매김은 많은 양의 데이터를 표시하는 모든 애플리케이션에서 중요한 기능입니다. 페이지 매김이 없으면 사용자는 필요한 정보를 찾기 위해 긴 목록을 스크롤해야 하므로 시간이 많이 걸립니다.
페이지 매김을 사용하면 데이터를 더 작고 관리하기 쉬운 덩어리로 분할하여 사용자가 원하는 특정 데이터를 쉽게 탐색할 수 있습니다. 이렇게 하면 시간이 절약될 뿐만 아니라 사용자가 정보를 더 쉽게 처리할 수 있습니다.