[Code Camp 3주차] Pagination vs Infinite Scroll

FE 08김우중·2022년 7월 27일
0

홈페이지 내에서 무수히 많은 목록 리스트를 보여줄때에는 다양한 방법이 있는데 크게 Pagination(페이지네이션)Infinite Scroll(무한스크롤) 방식이 존재한다

Pagination(페이지네이션)


가장 보편적이고 일반적인 방법으로 페이지 번호를 클릭해서 이동하는 페이지 처리 방법이다.
보기에는 그냥 클릭하면 변하는거 아닌가?? 하고 간단해보이지만 사실 페이지네이션 처리를 위해서는 다양한 것을 고려해주어야한다

1. page 인자를 사용해서 게시글 목록 불러오기

  • 먼저 API를 활용해서 목록을 불러온다

2. 페이지 클릭시 게시글 목록 다시 불러오기

  • 페이지네이션 페이지 숫자를 클릭할때마다 해당 페이지에 존재하는 데이터를
    다시 불러와야한다

3. 페이지네이션 숫자 뿌리기

  • 페이지네이션에 숫자를 직접 입력하는 것은 매우 비효율적이므로 배열함수를 사용해 뿌려야한다

4. next / prev 구현

  • 현재 페이지 이후의 10페이지, 이전의 10페이지를 불러오는 기능이 구현되어야 편리하다

5. 이전 페이지 / 다음 페이지 이동시 다시 불러오기

  • next / prev 버튼을 눌러서 이동할 경우 11 ~ 20 페이지라면 11 페이지로, 21 ~ 30 페이지라면 21 페이지로 게시글 목록이 다시 불러와야한다

6. 마지막 페이지 설정

  • 1 페이지 미만, 그리고 마지막 페이지가 화면에 출력된 이후로는 이전 페이지 다음 페이지 버튼이 동작하지 않아야한다

Infinite Scroll(무한 스크롤)

Infinite Scroll(무한 스크롤)은 페이지네이션과 달리 매우 간단하다 라고 생각할 수 있다.
페이지를 아래로 스크롤 하다가 종단점에 도달하면 새로운 데이터가 계속해서 추가되는 방식의 페이지 처리방법이다.

리액트에서는 Infinite Scroll 라이브러리가 많이 제공되어있으며 이 중에서 원하는걸 골라서 적용시켜주면 페이지네이션보다 간단히 구현할수있다.

!! 무조건적으로 편한것을 쓸려하면 안되고 각자 용도에 따라 써야하는거를 주의해서 사용하도록 하자

profile
새내기 개발자

0개의 댓글