[iOS] About Pagination

 

이번 글에서는 Pagination에 대해 글을 적어보려 합니다.

 

Pagination?

페이지네이션을 사용하면 데이터를 불러올 때, 전체 데이터를 받는 것이 아니라 지정된 개수의 데이터만 전달받게 됩니다.

우리가 쇼핑몰에 가방을 검색했는데, 검색 결과 10만개라면?

한 번에 받아보는 것보단 20개씩 잘라서 보는 것이 사용자도 좋고, 네트워크 과호출도 줄여볼 수 있을겁니다.

 

이 페이지네이션에는 커서, 오프셋을 기반으로 한 총 두 가지의 페이지네이션이 있습니다.

 

그럼 하나씩 살펴보겠습니다..!!

 

 Cursor-based Pagination

여기서 Cursor란 마지막으로 조회한 항목의 고유한 값입니다. 다음 데이터 배치가 시작되어야하는 위치를 나타내는 것이죠.

무엇을 기준으로 이 값을 정해질지는 API마다 다르기에 문서를 잘 확인해야겠죠?

 

아무튼 이 커서값을 기준으로 다음 데이터를 불러오도록 하는게 이 커서 기반 페이지네이션입니다.

데이터가 추가되거나 삭제되더라도 커서 이후의 항목을 기준으로 가져오기 때문에

데이터가 중복되거나 건너뛰는 문제가 발생하지 않습니다.

(데이터 중복에 관한 예시는 오프셋 기반 페이지네이션 설명에 적어보겠습니다.)

 

하지만 다음에 나올 오프셋 기반의 페이지네이션보다 구현이 살짝? 복잡합니다.

Offset-based Pagination

page 단위로 데이터를 전송하고, limit을 통해 데이터 보일 데이터를 제한합니다.

이게 무슨 말이냐?

예를 들어 page=1&limit=20  이라고 한다면 이는 1페이지의 데이터 20개를 달라는 것을 의미합니다.

이 방법은 커서 기반의 페이지네이션보다 구현이 간단합니다.

 

하지만 데이터 중복이 이 방법의 주요 문제점인데요..!

이건 또 무슨 말이냐~ 하면

1.  제가 어느 쇼핑몰에 들어가자마자 1번부터 5번까지의 콘텐츠를 본다면

(기본적으로 콘텐츠는 5개씩 로드, 정렬 기준은 최신순)

 

- 사용자에게 보여줄 배열

["상품1", "상품2", "상품3", "상품4", "상품5"] 

 

2. 사용자가 2번 페이지 클릭을 통해 다음 상품을 보려고 한다면

 

사용자에게 보여줄 배열

["상품1", "상품2", "상품3", "상품4", "상품5", "상품6", "상품7", "상품8", "상품9", "상품10"]

 

데이터를 불러오고 이를 배열에 담아 상품6 부터 사용자에게 보여주게 될겁니다.

 

3. 사용자가 8번 상품을 보는 중 서버에 상품 100번과 상품 99번이 추가 되었다고 가정하고, 

추가적으로 상품을 불러본다면 어떻게 될까요?

 

- 서버상의 순서

["상품100", "상품99", "상품1", "상품2", "상품3", "상품4", "상품5", 
"상품6", "상품7", "상품8", "상품9", "상품10", "상품11", "상품12", "상품13" ...]

 

서버상의 상품 순서는 위와 같을 겁니다 이 상태에서 5개씩 끊어본다면

3페이지에 해당하는 상품은 "상품9"부터 5개가 되겠죠?

이를 사용자에게 보여줄 배열에 담게되면

 

- 사용자에게 배여줄 배열

["상품1", "상품2" ... "상품8", "상품9", "상품10",
"상품9", "상품10", "상품11", "상품12", "상품13"]

 

위의 배열처럼 "상품 9", "상품 10" 이 중복될 것이고, 사용자는 위 상품들을 두 번씩 보게 될 것입니다.
페이지 클릭으로 상품을 보는 것이 아니라 스크롤을 통해 상품을 추가적으로 로드한다면
한 화면에 같은 상품들이 연속적으로 보이게 될 겁니다.

 

이 상황이 바로 앞서 말씀드린 오프셋 페이지네이션 기반의 단점인 데이터 중복 문제입니다.

 

 

여기까지 페이지네이션에 대한 특징들을 살펴보았는데요!

두 페이지네이션 방식의 장단점을 이해하고, 애플리케이션의 요구 사항에 맞는 방식을 선택하는 것이 중요할 것 같습니다.

정확한 데이터를 유지해야 하는 경우 커서 기반 페이지네이션이 유리하고,

구현의 단순함이 필요하거나 데이터 변화가 적은 경우 오프셋 기반 페이지네이션을 고려해볼 수 있을 것 같습니다.

 

 

그럼 2만~

 

.

.

.

.