8/1TIL

이세영·2024년 8월 2일

개요

페이지네이션은 긴 목록을 여러 페이지로 나누어 사용자가 쉽게 탐색할 수 있도록 하는 기능입니다. React를 사용하여 페이지네이션을 구현하는 방법을 배웠습니다.

1. 기본 구조 설정

React 컴포넌트를 만들고 필요한 상태를 정의합니다.

코드 예시

import { useEffect, useState } from "react";

const ITEMS_PER_PAGE = 20; // 페이지당 표시할 아이템 수

const PaginationExample = () => {
  const [items, setItems] = useState([]); // 전체 아이템
  const [currentPage, setCurrentPage] = useState(1); // 현재 페이지
  const [displayedItems, setDisplayedItems] = useState([]); // 현재 페이지에 표시할 아이템

  useEffect(() => {
    // 데이터 불러오기
    const fetchData = async () => {
      const response = await fetch('/api/items');
      const data = await response.json();
      setItems(data);
    };
    fetchData();
  }, []);
  
  useEffect(() => {
    // 페이지에 따라 아이템 필터링
    const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
    const endIndex = startIndex + ITEMS_PER_PAGE;
    setDisplayedItems(items.slice(startIndex, endIndex));
  }, [currentPage, items]);

  const totalPages = Math.ceil(items.length / ITEMS_PER_PAGE);
  
  const handlePageChange = (page) => {
    setCurrentPage(page);
  };

  return (
    <div>
      {/* 아이템 표시 */}
      <div>
        {displayedItems.map(item => (
          <div key={item.id}>{item.name}</div>
        ))}
      </div>
      
      {/* 페이지네이션 */}
      <div>
        {Array.from({ length: totalPages }, (_, index) => (
          <button key={index} onClick={() => handlePageChange(index + 1)}>
            {index + 1}
          </button>
        ))}
      </div>
    </div>
  );
};

export default PaginationExample;

2. 주요 구성 요소 설명

a. 상태 관리

items: 전체 아이템 목록.
currentPage: 현재 페이지 번호.
displayedItems: 현재 페이지에 표시할 아이템 목록.

b. 데이터 fetching

useEffect를 사용하여 컴포넌트가 마운트될 때 데이터 fetching을 수행합니다.

c. 페이지네이션 로직

전체 아이템 수에 따라 총 페이지 수를 계산합니다.
현재 페이지에 따라 어떤 아이템을 표시할 것인지 결정합니다.

d. 페이지 버튼 생성

Array.from()을 사용하여 페이지 수만큼 버튼을 생성합니다.
버튼 클릭 시 handlePageChange를 호출하여 currentPage를 업데이트합니다.

3. 스타일링 및 UX 개선

페이지 버튼에 CSS 스타일을 추가하여 사용자 경험을 개선할 수 있습니다.
현재 페이지를 강조 표시하는 기능을 추가할 수 있습니다.

예시 (CSS)

button {
  margin: 0 5px;
}

button.active {
  font-weight: bold;
  text-decoration: underline;
}

4. 최종 코드

위의 모든 내용을 종합하여 최종 코드를 작성합니다. 필요에 따라 코드에 스타일링을 추가하거나, 오류 처리를 구현할 수 있습니다.

import { useEffect, useState } from "react";

const ITEMS_PER_PAGE = 20; // 페이지당 아이템 수

const PaginationExample = () => {
  const [items, setItems] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [displayedItems, setDisplayedItems] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('/api/items');
      const data = await response.json();
      setItems(data);
    };
    fetchData();
  }, []);

  useEffect(() => {
    const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
    const endIndex = startIndex + ITEMS_PER_PAGE;
    setDisplayedItems(items.slice(startIndex, endIndex));
  }, [currentPage, items]);

  const totalPages = Math.ceil(items.length / ITEMS_PER_PAGE);

  const handlePageChange = (page) => {
    setCurrentPage(page);
  };

  return (
    <div>
      <div>
        {displayedItems.map(item => (
          <div key={item.id}>{item.name}</div>
        ))}
      </div>
      <div>
        {Array.from({ length: totalPages }, (_, index) => (
          <button 
            key={index} 
            onClick={() => handlePageChange(index + 1)} 
            className={currentPage === index + 1 ? 'active' : ''}
          >
            {index + 1}
          </button>
        ))}
      </div>
    </div>
  );
};

export default PaginationExample;