페이지네이션 구현

들어가기 전

웹이나 앱 개발을 공부하다 보면, 페이지네이션을 구현해야 할 일이 한 번쯤은 생긴다.

이 글은 페이지네이션의 개념과 구현 원리를 설명하는 데 목적이 있으며, 언어에 구애받지 않고 개념 중심으로 서술된다.

코드나 언어는 단지 도구일 뿐, 핵심 원리를 이해하면 어떤 기술 스택을 쓰더라도 직접 구현할 수 있다.

페이지네이션이 무엇이며 어떤 원리로 구현되는지 알아보자.

 

페이지네이션(Pagination)이란?

페이지네이션은 보여줄 데이터가 많을 때 사용하는 기능중 하나로 한번에 많은 양의 데이터를 보여줄 수 없을 때 사용하는 기능이다.

일상생활에서 우리는 일반 게시판에서 게시글 밑에 번호, 다음, 이전 버튼들이 있는것을 쉽게 접할 수 있다. 클릭을 할 때 각각의 페이지로 이동할 수 있는 것. 그 기능이 '페이지네이션'이다. (또는 '페이징'이라고도 불림)

 

페이지네이션을 구현할 때는 생각보다 수학적사고가 많이 들어가서 처음 라이브러리 없이 구현할 때 많이 애를 먹는 사람들도 있을것이다. 하지만 페이지네이션 원리를 이해한다면 생각보다 어렵지 않을 것이다.

 

페이지네이션 원리?

우리가 흔히 보는 페이지 네이션 레이아웃 모양이다.

 

페이지네이션 구현에 필요한 요소

요소	설명
총 게시글 수 (totalCount)	전체 게시글의 개수
한 페이지당 게시글 수 (limit)	한 페이지에 보여줄 게시글 개수
총 페이지 수 (totalPages)	Math.ceil(totalCount / limit) - ceil 소수점 올림 정수 반환하는 메서드
최대 페이지 버튼 수 (groupSize)	하단에 표시할 페이지 버튼 수 (ex. 3개씩)
페이지 그룹 배열	[ [1,2,3], [4,5,6], [7,8,9], [10] ]

 

이제 위 요소들을 보고 페이지네이션 파악해보자

우리가 만들 페이지네이션을 가정해보자

우리는  totalCount(총 게시글 수) 93개, 한 페이지당 게시글 수 (limit) 최대 10개의 게시글을 보여주며,

5개의 페이지를 가정해 볼 것이다. 5개 페이지라는 것은 처음 1~5 페이지를 보여주고 다음을 클릭하면 6~10 의 페이지를 보여주는 형식이다.

 

총 페이지 (totalPages)

총 게시글 수 / 한 페이지에서 보여질 최대 게시글 수
93 / 10 을 하면 9.3이라는 숫자가 나온다.

페이지를 그릇이라고 비유했을 때, 이 모든 데이터를 담기 위한 그릇(페이지)은 10개이다.

즉, 9.3 에서 올림 처리를 해야 10이라는 숫자가 나오는 것을 알 수 있다.

 

따라서, 총 페이지 수는 10이다.

그렇게 우리는 1~10 이라는 총 페이지의 수를 알았다.

총 페이지(totalPages)는 10 이다.

 

위에서 한 페이지에 보여질 groupSize (최대 페이지 수)를 3개로 가정했다.

우리가 사용하는 페이지는 보통 밑의 표처럼 나와 있다.

총 페이지가 10개, 최대 보여줄 페이지 수가 3개라면 밑에와 같은 형식이 나올 것이다.

1 2 3 / 4 5 6 / 7 8 9 / 10

 

페이지는 3개씩 보여주며 마지막에는 10페이지 하나만 남을 것이다.

 

그룹별로 묶으면 총 4개의 그룹이 나올 것이다.

1번 - 1 2 3 / 2번 - 4 5 6 / 3번 - 7 8 9 / 4 번 - 10

이 그룹별 페이지 갯수를 구하는 식은 위의 식과 비슷하게

 

totalPages (10) / groupSize (3) - (3.3 -> 4) 에서 올림을 하면 4개의 그룹이 나온다.

(ceil 메서드 이용.)

 

그럼 위의 필요한 요소들을 표로 다시 정리해보자

필요한 요소	수량
총 게시글 수	93 개
총 페이지 수	10 개
한 페이지에서 보여질 최대 게시글 수	10 개
한 페이지에서 보여질 최대 페이지 수	3 개
그룹별 페이지 갯수	4개

 

아마 글을 읽다가 눈치를 챈 사람들도 있을 것이다.

방금 얻었던 페이지의 정보들은 배열로 나타낼 수 있다.

 

[ [1, 2, 3], [4, 5, 6], [7, 8, 9], [10] ]
배열 요소를 편이상 group으로 칭할 것이다.
[ [1 Group], [2 Group], [3 Group], [4 Group] ]

 

이 해당 데이터의 형태를 기억해두자. 다음 섹션에서 필요한 부분이다.

 

이전 / 다음 버튼 생성 조건

우리가 여태 봐왔던 페이지네이션은

이전 버튼 다음 버튼이 있다. 그 버튼의 생성 조건은 다음과 같다

 

그럼 코드의 흐름으로 보면 이렇게 볼 수 있을 것이다.

 

첫 페이지 그룹 - 이전 버튼은 없으머, 다음 버튼 있음
= 페이지 그룹 배열 첫번째 인덱스 - 이전 버튼 X / 다음 버튼 O

중간 페이지 그룹 - 이전 버튼, 다음 버튼이 있다.
= 페이지 그룹 배열 중간 인덱스 - 이전 다음 버튼 있음 (중간 그룹 시작 ex: 2 Group, 3Group)

마지막 페이지 그룹 - 다음 버튼은 없으며 이전 버튼만 있음
= 페이지 그룹 배열 마지막 인덱스 - 이전 버튼 O / 다음 버튼 X

 

핵심 정리

요소	값 (예시)
총 게시글 수 (totalCount)	전체 게시글의 개수
한 페이지당 게시글 수 (limit)	한 페이지에 보여줄 게시글 개수
총 페이지 수 (totalPages)	Math.ceil(totalCount / limit) -> ceil 올림하는 메서드
최대 페이지 버튼 수 (groupSize)	하단에 표시할 페이지 버튼 수 (ex. 3개씩)
페이지 그룹 배열	[ [1,2,3], [4,5,6], [7,8,9], [10] ] 이런 구조

 

 

마무리

페이지네이션은 수많은 UI에서 쓰이는 기본적이지만 중요한 기능이다.

라이브러리에만 의존하지 않고 스스로 로직을 구현할 수 있어야,

데이터 구조나 동작 흐름을 더 잘 이해하고 디버깅할 수 있다.