페이지네이션(Pagination)과 소팅(Sorting)

1. 페이지네이션(Pagination)

페이지네이션은 대량의 데이터를 여러 페이지로 나누어 표시하는 기법입니다. 예를 들어, 검색 결과가 수천 건 이상인 경우 모든 결과를 한 번에 표시하지 않고, 페이지당 일정 개수의 데이터만 표시하여 사용자가 원하는 페이지를 탐색할 수 있도록 합니다. 페이지네이션은 데이터의 양이 많을수록 서버와 네트워크 리소스를 절약하고, 사용자에게 더 나은 경험을 제공합니다.

• 예시:
  • 온라인 쇼핑몰에서 상품 목록을 볼 때, 한 페이지에 10개씩만 표시하고 "다음 페이지", "이전 페이지" 버튼을 통해 이동할 수 있도록 하는 방식입니다.
  • 검색 엔진 결과에서 한 번에 10개씩 검색 결과를 보여주고, "다음"이나 "이전"을 눌러 다음 결과를 볼 수 있습니다.
• 구성 요소:
  • 페이지 번호: 사용자가 보고 있는 페이지의 번호입니다. 보통 1페이지, 2페이지 등으로 표시됩니다.
  • 페이지 크기: 한 페이지에 표시할 데이터의 개수입니다. 예를 들어, 페이지 크기가 10이면 한 페이지에 10개의 데이터만 표시됩니다.
  • 총 페이지 수: 전체 데이터를 페이지 크기로 나눴을 때의 총 페이지 개수입니다.
  • 총 데이터 수: 전체 데이터의 개수입니다.

페이지네이션의 장점

• 성능 최적화: 데이터를 나눠서 로드하기 때문에 메모리와 네트워크 리소스를 절약할 수 있습니다.
• 사용자 경험 개선: 한 번에 너무 많은 데이터를 로딩하지 않기 때문에 사용자에게 빠르게 보여줄 수 있습니다.

---

2. 소팅(Sorting)

소팅은 데이터를 특정 기준에 따라 정렬하는 것을 말합니다. 예를 들어, 이름순, 날짜순, 가격순으로 데이터를 정렬하여 사용자가 원하는 순서대로 데이터를 볼 수 있도록 합니다. 소팅은 알파벳, 숫자, 날짜 등 다양한 기준으로 수행될 수 있습니다.

• 예시:
  • 쇼핑몰에서 상품 목록을 가격순, 최신순, 인기순으로 정렬하는 기능이 소팅입니다.
  • 블로그 게시물 목록을 최신 게시물부터 보거나, 조회수가 높은 순서대로 정렬하는 경우입니다.
• 정렬 방향:
  • 오름차순(Ascending): 작은 값에서 큰 값으로 정렬합니다. 예를 들어, A부터 Z, 0부터 9까지입니다.
  • 내림차순(Descending): 큰 값에서 작은 값으로 정렬합니다. 예를 들어, Z부터 A, 9부터 0까지입니다.

소팅의 장점

• 가독성 향상: 사용자가 원하는 기준으로 데이터를 쉽게 찾을 수 있습니다.
• 데이터 분석에 유리: 특정 조건에 맞춰 정렬된 데이터를 보면 더 많은 인사이트를 얻을 수 있습니다.

---

페이지네이션과 소팅을 함께 사용하는 예

쇼핑몰에서 "최신순으로 정렬된 상품 목록을 페이지당 10개씩 표시"해야 할 때 페이지네이션과 소팅을 함께 적용합니다. 예를 들어:

• 페이지 번호: 2 (두 번째 페이지를 보고 싶을 때)
• 페이지 크기: 10 (한 페이지에 상품 10개씩 표시)
• 정렬 기준: "등록 날짜" (최신순으로 정렬)

이렇게 하면 최신순으로 정렬된 전체 상품 목록 중에서 두 번째 페이지에 해당하는 10개의 상품만 가져오게 되어, 효율적이고 보기 좋은 형태로 데이터를 제공합니다.

 

---

 

스프링에서 페이지네이션과 소팅의 활용

스프링 데이터 JPA에서는 Pageable 인터페이스를 통해 페이지네이션과 소팅을 간단하게 구현할 수 있습니다. 예를 들어, PageRequest.of(page, size, Sort.by(sortBy))와 같은 방식으로 페이지네이션과 소팅 정보를 전달할 수 있습니다.

페이지네이션과 소팅은 특히 대용량 데이터를 다루거나 사용자 경험을 중요시하는 애플리케이션에서 필수적인 기능입니다.

 

 

스프링 부트에서 페이지네이션(Pagination)과 소팅(Sorting)을 적용하여 데이터를 효율적으로 관리하고, SPA(Single Page Application)와 연동하는 방법에 대해 설명하겠습니다.

 

1. 페이지네이션(Pagination)과 소팅(Sorting)

스프링 데이터 JPA에서는 데이터 조회 시 페이지네이션과 소팅을 쉽게 구현할 수 있도록 PagingAndSortingRepository 인터페이스와 Pageable 객체를 제공합니다. 이를 통해 데이터베이스에서 모든 데이터를 한 번에 가져오지 않고, 특정 페이지의 데이터만 조회하고, 원하는 정렬 기준으로 데이터를 정렬할 수 있습니다.

예제: 페이지네이션 및 소팅을 적용한 레포지토리

import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

@Repository
public interface UserRepository extends JpaRepository<User, Long> {
    Page<User> findAll(Pageable pageable);  // 페이지네이션과 소팅이 가능한 메서드
}

페이지네이션 및 소팅을 사용한 서비스 예제

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Sort;
import org.springframework.stereotype.Service;

@Service
public class UserService {

    @Autowired
    private UserRepository userRepository;

    public Page<User> getUsers(int page, int size, String sortBy) {
        // PageRequest.of를 통해 페이지와 정렬 기준을 정의
        Pageable pageable = PageRequest.of(page, size, Sort.by(sortBy));
        return userRepository.findAll(pageable);  // 페이지 및 소팅 적용된 결과 반환
    }
}

• PageRequest.of(page, size, Sort.by(sortBy)): 페이지 번호(page), 페이지 크기(size), 소팅 기준(sortBy)을 정의합니다.
• Page: 반환된 페이지 객체는 총 페이지 수, 현재 페이지, 페이지에 포함된 데이터 목록 등을 포함합니다.

 

---

 

2. SPA(Single Page Application)와의 연동

SPA는 한 번의 페이지 로드 후 필요할 때마다 데이터를 비동기적으로 서버에서 가져와 화면을 갱신하는 방식입니다. React, Vue.js, Angular와 같은 프론트엔드 프레임워크가 주로 SPA로 개발됩니다. 이와 같은 SPA를 스프링 부트 백엔드와 연동할 때 페이지네이션과 소팅을 활용해 데이터를 효율적으로 전달할 수 있습니다.

SPA와 연동을 위한 REST API 컨트롤러 예제

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class UserController {

    @Autowired
    private UserService userService;

    @GetMapping("/users")
    public Page<User> getUsers(
            @RequestParam(defaultValue = "0") int page,  // 페이지 번호
            @RequestParam(defaultValue = "10") int size, // 페이지 크기
            @RequestParam(defaultValue = "id") String sortBy) {  // 정렬 기준
        return userService.getUsers(page, size, sortBy);
    }
}

• /users 엔드포인트: 클라이언트에서 page, size, sortBy 파라미터를 전달하여 요청 시, 페이지네이션과 소팅이 적용된 데이터를 반환합니다.
• 리턴 타입이 Page<User>: 페이지네이션과 소팅 정보가 포함된 Page 객체를 반환하므로, 프론트엔드에서 페이지 정보와 데이터를 함께 활용할 수 있습니다.

---

SPA와 연동 예시 (React)

React와 같은 프론트엔드에서 페이지네이션과 소팅을 적용한 데이터를 요청하는 예제입니다.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const UserList = () => {
    const [users, setUsers] = useState([]);
    const [page, setPage] = useState(0);
    const [size, setSize] = useState(10);
    const [sortBy, setSortBy] = useState("id");

    useEffect(() => {
        // 백엔드에서 페이지네이션과 소팅 적용된 데이터를 가져오기
        axios.get(`/users?page=${page}&size=${size}&sortBy=${sortBy}`)
            .then(response => setUsers(response.data.content))  // Page 객체의 content만 가져오기
            .catch(error => console.error("데이터 가져오기 실패:", error));
    }, [page, size, sortBy]);

    return (
        <div>
            <h2>사용자 목록</h2>
            <ul>
                {users.map(user => (
                    <li key={user.id}>{user.name}</li>
                ))}
            </ul>
            <button onClick={() => setPage(page - 1)} disabled={page === 0}>이전</button>
            <button onClick={() => setPage(page + 1)}>다음</button>
        </div>
    );
};

export default UserList;

• 페이지 이동: 이전, 다음 버튼을 통해 페이지를 변경하며 데이터를 가져옵니다.
• 정렬 기준 변경: 정렬 기준도 상태로 관리하고, 필요 시 setSortBy를 사용하여 변경할 수 있습니다.

요약

1. 스프링 부트의 페이지네이션과 소팅 기능을 활용하여 대규모 데이터 처리가 가능하도록 합니다.
2. SPA에서 페이지네이션 및 소팅 파라미터를 사용해 REST API 요청을 수행하며, 효율적인 데이터 로드를 통해 사용자 경험을 개선할 수 있습니다.