Morioh
Login
Duck Hwan

Duck Hwan

7 months ago

ReactJS에서 페이지 매김을 구현하는 방법

페이지 매김은 콘텐츠를 개별 페이지로 나누는 프로세스로, 사용자가 많은 양의 정보를 더 쉽게 탐색하고 탐색할 수 있도록 해줍니다. 두꺼운 책을 여러 장으로 나누는 것과 같지만 웹사이트와 앱의 디지털 콘텐츠를 위한 것입니다.

이번 튜토리얼에서는 ReactJS에서 페이지 매김을 구현하는 방법을 배웁니다. ReactJS는 사용자 인터페이스, 특히 단일 페이지 애플리케이션을 구축하는 데 사용되는 널리 사용되는 JavaScript 라이브러리입니다.

React 앱 설정

페이지 매김을 시작하기 전에 간단한 React 앱을 설정해 보겠습니다. 우리는 React 애플리케이션을 부트스트랩하기 위해 Facebook에서 제공하는 편리한 도구인 Create React App(CRA)을 사용할 것입니다.

먼저 Node.js와 npm(노드 패키지 관리자)을 설치하지 않았다면 설치하세요. Node.js는 서버에서 JavaScript를 실행할 수 있게 해주는 JavaScript 런타임입니다. npm은 Node.js와 함께 제공되는 패키지 관리자이며 종속성을 관리하는 데 도움이 됩니다.

Node.js 및 npm을 설치한 후 터미널에서 다음 명령을 실행하여 CRA를 사용하여 새 프로젝트를 만듭니다.

npx create-react-app pagination-app

이 명령은 "pagination-app"이라는 새로운 React 애플리케이션을 생성합니다.

페이지 매김 시작하기

기본 개념을 이해하는 것부터 시작하겠습니다. 100개의 항목 배열이 있고 페이지당 10개의 항목을 표시한다고 가정합니다. 즉, 10페이지가 됩니다.

사용자가 페이지 번호를 클릭하면 표시하려는 항목의 시작 색인과 끝 색인을 계산해야 합니다. 방법은 다음과 같습니다.

let itemsPerPage = 10;
let pageNumber = 1; // let's say

let startIndex = (pageNumber - 1) * itemsPerPage;
let endIndex = pageNumber * itemsPerPage;

pageNumber가 1이면 startIndex는 0이고 endIndex는 10이 됩니다. 따라서 첫 번째 페이지의 경우 배열의 인덱스 0에서 10까지 항목을 표시합니다. 두 번째 페이지에는 인덱스 10부터 20까지의 항목이 표시됩니다.

페이지 매김 구성 요소 만들기

이제 간단한 Pagination Component를 만들어 보겠습니다. 이 구성 요소는 페이지 번호를 표시하고 페이지 클릭 이벤트를 처리합니다.

import React from 'react';

const Pagination = ({ itemsPerPage, totalItems, paginate }) => {
    const pageNumbers = [];

    for (let i = 1; i <= Math.ceil(totalItems / itemsPerPage); i++) {
        pageNumbers.push(i);
    }

    return (
        <nav>
            <ul className='pagination'>
                {pageNumbers.map(number => (
                    <li key={number} className='page-item'>
                        <a onClick={() => paginate(number)} href='!#' className='page-link'>
                            {number}
                        </a>
                    </li>
                ))}
            </ul>
        </nav>
    );
};

export default Pagination;

이 구성요소에서는 총 페이지 수를 계산하고 페이지 번호 배열을 생성합니다. 그런 다음 이 페이지 번호를 렌더링합니다. 페이지 번호를 클릭하면 클릭한 페이지 번호와 함께 이 구성 요소에 prop으로 전달된 paginate 함수를 호출합니다.

페이지가 매겨진 데이터 표시

이제 이 페이지 매김 구성 요소를 사용하여 앱 구성 요소에 페이지가 매겨진 데이터를 표시해 보겠습니다.

먼저 더미 데이터를 만들어 보겠습니다.

const data = Array.from({length: 100}, (_, i) => i + 1);

그러면 1부터 100까지의 숫자 배열이 생성됩니다.

그런 다음 앱 구성 요소에서 페이지 매김 구성 요소를 가져옵니다.

import Pagination from './Pagination';

앱 구성요소 상태에서 currentPage 및 itemsPerPage라는 두 개의 새로운 필드를 추가해 보겠습니다.

this.state = {
    data: Array.from({length: 100}, (_, i) => i + 1),
    currentPage: 1,
    itemsPerPage: 10
};

이제 렌더링 메소드에서 현재 페이지의 데이터를 계산해 보겠습니다.

const { data, currentPage, itemsPerPage } = this.state;

const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);

마지막으로 데이터와 페이지 매김 구성요소를 렌더링해 보겠습니다.

return (
    <div>
        {currentItems.map(item => <h2>{item}</h2>)}

        <Pagination 
            itemsPerPage={itemsPerPage}
            totalItems={data.length}
            paginate={this.paginate}
        />
    </div>
);

paginate 함수는 상태에서 currentPage를 업데이트하는 앱 구성요소의 메소드입니다.

paginate = pageNumber => this.setState({ currentPage: pageNumber });

그리고 그게 다입니다! ReactJS 애플리케이션에서 페이지 매김을 성공적으로 구현했습니다.

1.85 GEEK