위는 현재의 게시판 상황이다. 이전 작성시간 추가 글과 달리 페이지 번호와 검색 부분이 생긴 것이 보인다. 이번 글에서는 페이징 처리에 관해서 작성해보겠다.

JpaRepository의 findAll Method를 이용해서 DB에 있는 모든 정보를 가지고 오게 되면 말 그대로 DB에 있는 모든 정보를 가지고 오게 된다. 이때, Pageable이라는 클래스를 넘겨주게 된다면 page의 수와 한 페이지에 보여줄 게시글의 수인 size를 지정할 수 있다.

페이징 처리

페이징 처리 전 boardListForm

@GetMapping("/board/list")
public String boardListForm(Model model) {

	 model.addAttribute("board", boardService.boardList());
     
     return "boardList";
}

페이징 처리 후 boardListForm

@GetMapping("/board/list")
public String boardListForm(Model model, @PageableDefault(page = 0, size = 9, sort = "id",
        direction = Sort.Direction.DESC) Pageable pageable) {

	 model.addAttribute("board", boardService.boardList(pageable));
     
     return "boardList";
}

위는 컨트롤러 중 GET 요청을 받는 boardList 부분이다. 페이징 처리 전과 후의 차이점을 설명해주겠다.

@PageableDefault(page = , size = , sort = , direction = )

• page: default 페이지 지정
• size: 한 페이지에 보여줄 게시글 수 지정
• sort: 정렬 기준 지정
  • direction: 정렬 순서 지정
    • Sort.Direction.DESC: 정렬 기준의 역순으로 정렬

Pageable 객체를 model을 통해 boardService의 boardList로 넘겨준다.

boardService/boardList 변경 전

public List<Board> boardList() {
    return boardRepository.findAll();
}

boardService/boardList 변경 후

public Page<Board> boardList(Pageable pageable) {
    return boardRepository.findAll(pageable);
}

이때 boardService/boardList에는 Pagealbe 설정이 되어있지 않으니 위처럼 작성을 해야 한다. 이때, 본래에는 리턴 값이 List였지만 boardRepository.findAll에 pageable을 넘겨주기 때문에 리턴 값을 Page로 변경해야 한다.

본래 페이징 처리를 할 때 쿼리문도 작성을 해야 하고 페이징 처리를 할 클래스도 따로 생성을 해야 한다.
그러나 JPA와 JPA의 findAll 메서드를 사용할 때 pageable 클래스를 넘겨주게 된다면 복잡한 처리를 해결할 수 있다.

페이지 블럭 출력하기

페이지 블록 출력하기
필요한 변수

• nowPage: 현재 페이지
• startPage: 블럭에서 보여줄 시작 페이지 페이지
• endPage: 블럭에서 보여줄 마지막 페이지

사용할 Thymeleaf 문법

• th:text: 태그 안에서 데이터를 출력
• th:each: 반복문
• th:each="${number:#number(시작번호, 끝번호)}" : 시작 번호에서 끝 번호까지 반복

페이지 블럭 처리 후 BoardController/boardList

@GetMapping("/board/list")
public String boardListForm(Model model, @PageableDefault(page = 0, size = 9, sort = "id",
            direction = Sort.Direction.DESC) Pageable pageable) {

 	Page<Board> list = null;

    if (searchKeyword == null) {
        list = boardService.boardList(pageable);
    } else {
        list = boardService.boardSearchList(searchKeyword, pageable);
    }

    int nowPage = list.getPageable().getPageNumber() + 1;
    int startPage = Math.max(nowPage - 4, 1); //Math.max를 이용해서 start 페이지가 0이하로 되는 것을 방지
    int endPage = Math.min(nowPage + 5, list.getTotalPages()); //endPage가 총 페이지의 개수를 넘지 않도록

    model.addAttribute("list", list);
    model.addAttribute("nowPage", nowPage);
    model.addAttribute("startPage", startPage);
    model.addAttribute("endPage", endPage);


    return "boardList";
}

코드 설명

• getPageable().getPageNumber()

  • 현재 페이지 불러오기

• int startPage = Math.max(nowPage - 4, 1)

  • Math.max를 이용해서 startPage가 0이하로 되는 것을 방지

• int endPage = Math.min(nowPage + 5, list.getTotalPages());

  • Math.min을 이용해서 endPage가 총 페이지 수를 넘는 것을 방지
  • list.getTotalPages() : 총 페이지의 수 불러오기

• model.addAttribute("nowPage", nowPage);
model.addAttribute("startPage", startPage);
model.addAttribute("endPage", endPage);

  • 출력을 위해서 변수들을 넘겨줌

boardlist.html의 페이징 처리 추가 부분

 <th:block th:each="page : ${#numbers.sequence(startPage, endPage)}">
 	 <!--현재 페이지와 다른 페이지를 클릭시 해당 페이지로 넘어감-->
     <a th:if="${page != nowPage}" th:href="@{/board/list(page=${page - 1})}" th:text="${page}"></a>
     <!--현재 페이지와 같은 페이지를 클릭시 변화없음-->
     <strong th:if="${page == nowPage}" th:text="${page}"></strong>
</th:block>

html에 위의 페이지 코드도 추가를 했다. 이제 확인을 해보자.

페이징 처리 후 게시글 리스트 화면

나는 한 페이지에 9개의 게시글이 보이도록 설정을 했다. 또한, 별도의 style 코드를 추가해서 현재 페이지는 빨간색으로 보이도록 했다.
이제 2페이지를 클릭해서 페이징 처리가 정상적으로 적용이 됐는지 확인을 해보자.

---

2페이지로 이동한 게시글 리스트 화면

2페이지를 클릭했더니 정상적으로 2페이지로 넘어온 것을 알 수 있다.

---

다음 글은 검색 기능에 대해서 작성하겠습니다. 글에서 부족한 부분이 많을 것 같습니다. 모든 지적을 환영합니다!!

더 자세한 코드는 깃허브를 참고해주세요!

깃허브: https://github.com/pp8817/ToyProjectBoard