페이징처리 - Pagination.js + Pageable

1. Pagination.js (React 프론트엔드에서 사용)

Pagination.js는 React 컴포넌트로 사용자가 페이지를 이동할 수 있도록 버튼 UI를 제공하는 클라이언트 측(프론트엔드) 페이지네이션 기능입니다.

주요 기능

• 사용자가 직접 페이지를 이동할 수 있도록 UI 버튼(«, ‹, 1, 2, 3, ›, ») 제공
• handlePage와 같은 함수로 페이지 변경 시 API 요청을 보낼 수 있음
• 선택 삭제, 필터링 등 추가 UI 요소 포함 가능
• 보통 백엔드에서 데이터를 받아올 때 프론트엔드에서 페이지를 나누는 역할을 수행

 

2. Pageable (Spring Boot 백엔드에서 사용)

Pageable은 Spring Boot의 데이터 페이징을 위한 인터페이스로, 백엔드에서 데이터를 페이징 처리할 때 사용됩니다.
Pagination.js가 프론트엔드에서 페이지 이동을 담당하는 UI라면, Pageable은 백엔드에서 페이징된 데이터를 제공하는 로직입니다.

주요 기능

• 백엔드에서 대량의 데이터를 한 번에 불러오지 않고, 원하는 페이지만 가져오도록 지원
• PageRequest.of(page, size, sort)를 사용해 원하는 페이지와 정렬 조건을 설정 가능
• Spring Data JPA와 함께 사용하여 자동으로 SQL 쿼리에 LIMIT와 OFFSET을 추가하여 DB에서 페이징 처리

---

예제

Pagination.js (React에서 페이지네이션 UI 구현)

import React from 'react';

function Pagination({ currentPage, totalPages, handlePage }) {
  return (
    <div className="pagination">
      {currentPage > 1 && (
        <button onClick={() => handlePage(currentPage - 1)}>이전</button>
      )}
      {[...Array(totalPages)].map((_, index) => (
        <button
          key={index + 1}
          className={currentPage === index + 1 ? 'active' : ''}
          onClick={() => handlePage(index + 1)}
        >
          {index + 1}
        </button>
      ))}
      {currentPage < totalPages && (
        <button onClick={() => handlePage(currentPage + 1)}>다음</button>
      )}
    </div>
  );
}

export default Pagination;

• 기능: 사용자가 버튼을 클릭하면 handlePage를 호출하여 새로운 데이터를 불러옴.

Pageable (Spring Boot에서 백엔드 데이터 페이징 처리)

import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/products")
public class ProductController {
    
    private final ProductRepository productRepository;

    public ProductController(ProductRepository productRepository) {
        this.productRepository = productRepository;
    }

    // Pageable을 이용하여 페이징된 데이터를 반환
    @GetMapping
    public Page<Product> getProducts(Pageable pageable) {
        return productRepository.findAll(pageable);
    }
}

• 기능: GET /products?page=1&size=10 같은 요청이 들어오면 자동으로 해당 페이지의 데이터만 반환함.

---

Pagination.js와 Pageable을 함께 사용하는 예제

백엔드(Spring Boot)에서 Pageable을 사용해 페이징 데이터를 제공하고, 프론트엔드(React)에서 Pagination.js를 이용해 UI를 렌더링하는 방식

백엔드: Pageable을 활용한 API

@GetMapping("/products")
public Page<Product> getProducts(Pageable pageable) {
    return productRepository.findAll(pageable);
}

 

프론트엔드: Pagination.js를 사용하여 페이지네이션 UI 렌더링

import { useState, useEffect } from "react";
import Pagination from "./Pagination";

function ProductList() {
  const [products, setProducts] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);

  useEffect(() => {
    fetch(`/products?page=${currentPage - 1}&size=10`) // 백엔드 Pageable과 맞춰야 함
      .then(res => res.json())
      .then(data => {
        setProducts(data.content); // `content`에는 현재 페이지 데이터가 있음
        setTotalPages(data.totalPages);
      });
  }, [currentPage]);

  return (
    <div>
      <ul>
        {products.map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
      <Pagination currentPage={currentPage} totalPages={totalPages} handlePage={setCurrentPage} />
    </div>
  );
}

 

정리

	Pagination.js (React)	Pageable (Spring Boot)
역할	클라이언트(프론트엔드)에서 UI를 제공	서버(백엔드)에서 데이터를 페이징 처리
사용 목적	사용자가 페이지 이동을 편리하게 함	DB에서 필요한 데이터만 가져와 성능 최적화
주요 함수	handlePage(), onClick	Pageable, PageRequest.of()
주요 기능	페이지 버튼 UI 제공, 클릭 시 데이터 요청	자동으로 SQL LIMIT/OFFSET 적용
데이터 요청 방식	API를 통해 백엔드에서 데이터를 받아옴	DB에서 페이징된 데이터를 반환
예제 요청	GET /products?page=1&size=10	Page<Product> getProducts(Pageable pageable)