Good Morning

Spring MVC에서의 효과적인 페이징 처리 본문

Back-End/Spring

Spring MVC에서의 효과적인 페이징 처리

욘쥰 2024. 9. 25. 11:27

소개

웹 애플리케이션에서 대량의 데이터를 효과적으로 표시하기 위해 페이징 처리는 필수적입니다. 이 글에서는 Spring MVC 프레임워크를 사용하여 구현한 페이징 시스템에 대해 설명하겠습니다.

핵심 컴포넌트

1. PageHandler 클래스

페이징 처리의 핵심 로직을 담당하는 클래스입니다.

public class PageHandler {
    private SearchCondition sc;
    public final int NAV_SIZE = 10; // 페이지 네비게이션 크기
    private int totalCnt; // 총 게시물 수
    private int totalPage; // 전체 페이지 수
    private int beginPage; // 시작 페이지
    private int endPage; // 끝 페이지
    private boolean showPrev; // 이전 페이지 표시 여부
    private boolean showNext; // 다음 페이지 표시 여부

    // 생성자 및 메서드...
}

 

이 클래스는 총 게시물 수와 현재 페이지 정보를 바탕으로 페이징 정보를 계산합니다.

2. SearchCondition 클래스

검색 조건과 페이징 정보를 담는 클래스입니다.

public class SearchCondition {
    private Integer page = 1;
    private Integer pageSize = DEFAULT_PAGE_SIZE;
    private String option = "";
    private String keyword = "";

    // 생성자, getter, setter 등...

    public String getQueryString(Integer page) {
        return UriComponentsBuilder.newInstance()
                .queryParam("page", page)
                .queryParam("pageSize", pageSize)
                .queryParam("option", option)
                .queryParam("keyword", keyword)
                .build().toString();
    }
}

 

이 클래스는 현재 페이지, 페이지 크기, 검색 옵션, 키워드 등의 정보를 포함하며, 이를 쿼리 문자열로 변환하는 기능을 제공합니다.

컨트롤러에서의 구현

BoardController의 list 메소드에서 페이징 처리를 구현합니다:

@GetMapping("/list")
public String list(Model m, SearchCondition sc, HttpServletRequest request) {
    try {
        int totalCnt = boardService.getSearchResultCnt(sc);
        m.addAttribute("totalCnt", totalCnt);

        PageHandler pageHandler = new PageHandler(totalCnt, sc);

        List<BoardDto> list = boardService.getSearchResultPage(sc);
        m.addAttribute("list", list);
        m.addAttribute("ph", pageHandler);

        // 기타 로직...
    } catch (Exception e) {
        // 예외 처리...
    }

    return "boardList";
}

 

이 메소드는 총 게시물 수를 조회하고, PageHandler 객체를 생성하여 페이징 정보를 계산한 후, 현재 페이지에 해당하는 게시물 목록을 가져옵니다.

뷰에서의 구현

JSP에서 페이징 UI를 구현합니다:

<div class="paging-container">
    <div class="paging">
        <c:if test="${ph.showPrev}">
            <a class="page" href="<c:url value="/board/list${ph.sc.getQueryString(ph.beginPage-1)}"/>">&lt;</a>
        </c:if>
        <c:forEach var="i" begin="${ph.beginPage}" end="${ph.endPage}">
            <a class="page ${i==ph.sc.page? "paging-active" : ""}" 
               href="<c:url value="/board/list${ph.sc.getQueryString(i)}"/>">${i}</a>
        </c:forEach>
        <c:if test="${ph.showNext}">
            <a class="page" href="<c:url value="/board/list${ph.sc.getQueryString(ph.endPage+1)}"/>">&gt;</a>
        </c:if>
    </div>
</div>

 

이 코드는 페이지 번호와 이전/다음 페이지 링크를 표시합니다.

결론

효과적인 페이징 처리를 위해서는 서버 사이드에서의 데이터 처리와 클라이언트 사이드에서의 UI 구현이 조화롭게 이루어져야 합니다. PageHandler와 SearchCondition 클래스를 활용하여 페이징 로직을 구현하고, 컨트롤러와 뷰에서 이를 적절히 사용함으로써 사용자 친화적이고 효율적인 페이징 시스템을 구축할 수 있습니다.