리액트 - 페이지네이션

Pagination이란, 많은 데이터를 부분적으로 불러오는 기술

전체 데이터에서 지정된 갯수만 데이터를 전달하는 방법

 

구현 방법 두 가지 

1. 페이지 기반 (오프셋 기반)

offset, limit 쿼리를 이용

offset : 지금까지 불러온 데이터의 양

limit : 보여주는 데이터의 양

 

이미 불러온 데이터에 추가로 생성되거나 삭제되는 데이터가 있을 경우 

다음 데이터를 불러올때 일부가 누락되거나 중복되는 데이터가 발생한다. 

 

네이버 웹툰, 커뮤니티 등 

 

사용자가 페이지를 넘기는 순간 끊김이 발생한다. 

사용자가 현재 데이터 위치를 가늠할 수 있다. 

 

2. 커서 기반

: 가장 최근에 불러온 데이터를 기반으로 다음 데이터를 불러옴 

cursor커서 라는 식별자를 이용 (응답 본문이나, http 헤더에 포함.. API 설계에 따라 다르다) 

 

유튜브, 인스타그램 등 

 

페이지 구분이 없고, 스크롤 등을 이용하므로 UX의 끊김이 발생하지 않는다.

 

https://nx006.tistory.com/58

페이지네이션(Pagination)