Pagination vs Infinite Scroll

한승진·2022년 12월 22일
0

codecamp

목록 보기
8/11

페이지 처리 방식

1.일반적인 방식 (Pagination)

2.무한스크롤 방식 (Infinite Scroll)

Pagination

페이지 번호를 클릭해서 이동하는 방식의 페이지 처리 방법입니다.
게시판 형태의 페이지에서 가장 일반적으로 사용되는 방식입니다.

a. page 인자를 사용해서 게시글 목록 불러오기
b. 페이지 클릭 시 게시글 목록 데이터 다시 불러오기 (refetch)
c. map을 이용해 페이지네이션 뿌리기
d. 페이지네이션 next / prev 구현
e. lastPage
f. 이전 페이지/다음 페이지 이동 시 refetch

Infinite Scroll

유튜브 또는 페이스북과 같이, 페이지를 아래로 스크롤 하다가 종단점에 도달하면

새로운 데이터가 계속해서 추가되는 방식의 페이지 처리 방법을 **무한스크롤 방식**이라고 합니다.

react 무한스크롤 라이브러리 중 **react infinite scroller** 를 사용할 것입니다.

profile
프론트엔드 개발자

0개의 댓글