ReactJS - Pagination: A Beginner's Guide

안녕하세요, 미래의 React 개발자 여러분! 오늘 우리는 ReactJS의 페이지네이션 세계로 흥미로운 여정을 떠납니다. először 코드를 작성해 본 적이 없어도 걱정하지 마세요 - 나는 친절한 안내자로서 모든 것을 단계별로 설명해 드릴 것입니다. 그러니 커피 한 잔을 마시고, 이제 시작해 보세요!

What is Pagination? (페이지네이션是什么?)

코드로 들어가기 전에, 페이지네이션에 대해 이해해 보겠습니다. 책을 읽는다고 가정해 봅시다. 모든 페이지를 한 번에 보여주는 대신, 책이 관리 가능한 조각으로 나뉘어 있습니다. 이게 바로 페이지네이션이 웹 콘텐츠에 대해 해주는 일입니다!

웹 개발에서 페이지네이션은 대량의 데이터를 더 작은, 관리 가능한 부분으로 나누는 기술입니다. 여러 페이지가 있는 책처럼, 각 페이지는 콘텐츠의 일부를 표시합니다.

Why Use Pagination in React? (React에서 페이지네이션을 사용하는 이유는 무엇인가요?)

이제 "왜 페이지네이션에 신경 쓰죠?"라는 생각이 드실 수도 있습니다. 그럼 작은 이야기를 들려드리겠습니다.

한때, 10,000개의 아이템을 단일 페이지에 표시하려고 시도한 React 앱이 있었습니다. 그 앱은 고생하다가 결국崩溃하고, 사용자들은 실망했습니다. 하지만 그때, 페이지네이션이라는 영웅이 나타나 10,000개의 아이템을 깔끔하게 관리 가능한 페이지로 나누었습니다. 그 결과 앱은 원활하게 실행되었고, 사용자들은 행복했습니다.

이 이야기의 교훈은 다음과 같습니다:

1. 성능 향상
2. 더 나은 사용자 경험
3. 쉽게 이동할 수 있는 导航

Getting Started with Pagination in React (React에서 페이지네이션을 시작하는 방법)

이제 "왜"를 이해했으니, 코드로 손을 더러 만들어 보겠습니다!

Step 1: Setting Up the Project (프로젝트 설정)

먼저 새로운 React 프로젝트를 생성해야 합니다. Node.js와 npm(노드 패키지 관리자)를 컴퓨터에 설치하지 않았다면 설치해야 합니다. 그런 다음 터미널을 엽니다:

npx create-react-app react-pagination-demo
cd react-pagination-demo
npm start

이 명령어는 새로운 React 프로젝트를 생성하고 개발 서버를 시작합니다.

Step 2: Installing Required Packages (필요한 패키지 설치)

이 튜토리얼에서는 인기 있는 페이지네이션 라이브러리인 react-paginate를 사용하겠습니다. 설치해 보겠습니다:

npm install react-paginate

Step 3: Creating a Simple Pagination Component (간단한 페이지네이션 컴포넌트 생성)

이제 src 폴더에 Pagination.js라는 새로운 파일을 생성하고 다음 코드를 추가해 보겠습니다:

import React, { useState, useEffect } from 'react';
import ReactPaginate from 'react-paginate';

const Pagination = ({ data, itemsPerPage }) => {
const [currentItems, setCurrentItems] = useState([]);
const [pageCount, setPageCount] = useState(0);
const [itemOffset, setItemOffset] = useState(0);

useEffect(() => {
const endOffset = itemOffset + itemsPerPage;
setCurrentItems(data.slice(itemOffset, endOffset));
setPageCount(Math.ceil(data.length / itemsPerPage));
}, [itemOffset, itemsPerPage, data]);

const handlePageClick = (event) => {
const newOffset = (event.selected * itemsPerPage) % data.length;
setItemOffset(newOffset);
};

return (
<>
<div className="items-list">
{currentItems.map((item, index) => (
<div key={index}>{item}</div>
))}
</div>
<ReactPaginate
breakLabel="..."
nextLabel="next >"
onPageChange={handlePageClick}
pageRangeDisplayed={5}
pageCount={pageCount}
previousLabel="< previous"
renderOnZeroPageCount={null}
/>
</>
);
};

export default Pagination;

이를 간단히 설명하자면:

1. 필요한 의존성을 가져옵니다.
2. Pagination 컴포넌트를 생성하고 data와 itemsPerPage를 프로퍼티로 받습니다.
3. 현재 아이템, 페이지 수, 아이템 오프셋을 관리하기 위해 useState 훅을 사용합니다.
4. useEffect 훅은 현재 페이지에 표시할 아이템을 계산합니다.
5. handlePageClick 함수는 사용자가 페이지 번호를 클릭할 때 오프셋을 업데이트합니다.
6. 현재 아이템과 ReactPaginate 컴포넌트를 렌더링합니다.

Step 4: Using the Pagination Component (페이지네이션 컴포넌트 사용)

이제 App.js에서 Pagination 컴포넌트를 사용해 보겠습니다:

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

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

return (
<div className="App">
<h1>React Pagination Demo</h1>
<Pagination data={data} itemsPerPage={10} />
</div>
);
}

export default App;

여기서 우리는 100개의 아이템을 생성하고 Pagination 컴포넌트에 itemsPerPage를 10으로 전달합니다.

Step 5: Adding Some Style (스타일 추가)

이제 우리의 페이지네이션을 예쁘게 보이게 스타일을 추가해 보겠습니다. App.css에 다음 코드를 추가합니다:

.App {
text-align: center;
font-family: Arial, sans-serif;
}

.items-list {
margin-bottom: 20px;
}

ul {
list-style-type: none;
padding: 0;
}

li {
display: inline-block;
margin: 0 5px;
}

li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
border: 1px solid #ddd;
}

li a:hover {
background-color: #ddd;
}

li.active a {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}

Conclusion ( 결론 )

그렇게 해서! 당신은 React에서 간단하지만 효과적인 페이지네이션 시스템을 만들었습니다. 페이지네이션은 피자를 자르는 것처럼 - 콘텐츠를 더 쉽게 소화하고 즐길 수 있게 합니다.

이제 우리가 배운 것을 요약해 보겠습니다:

개념	설명
Pagination	대량의 데이터를 더 작은, 관리 가능한 부분으로 나누는 기술
react-paginate	사용하기 쉬운 페이지네이션 컴포넌트를 제공하는 React 라이브러리
useState	기능 컴포넌트에서 상태를 관리하는 React 훅
useEffect	컴포넌트에서 부수 효과를 수행하는 React 훅

React 여정을 계속하면서, 당신은 페이지네이션을 더욱 맞춤화하고 개선할 수 있는 많은 방법을 찾을 것입니다. Perhaps you'll add search functionality, or maybe you'll create a more complex data fetching system. 가능성은 무한합니다!

기억해야 할 점은, React(또는 다른 프로그래밍 기술)을 마스터하는 열쇠는 연습입니다. 그러니 이 코드를 실험해 보고, 것을 깨끗이 하고, 실수에서 배우세요. 이게 우리가 모두 개발자로 성장하는 방법입니다.

기쁜 코딩을 하고, React 앱이 항상 완벽하게 페이지네이션되기를 바랍니다!

Credits: Image by storyset