Pagenation, 말그대로 페이지를 나타내는 것이다. 흔히 볼 수 있다.
프론트엔드에서 게시물 목록이나 상품목록 등이 필요할 때, map을 사용해 리스트화시키고 보여준다, 그런데 우리가 fetchBoards(목록 조회하는 API)라는 API요청을 백엔드로 보내게 되면
백엔드에서 정한 최대 개수 까지만 리스트를 보여준다.(우리가 못바꾼다.)
fetchBorads라는 API 에서 정해진 최대 개수가 10개라면, 우리는 10개의 목록밖에 리스트화 시킬수 없다는 것이다.
그래서 우리는 페이지를 나타내는 화면에서 이동 할 때 마다, 목록 자체를 리랜더링 (refetchQueries를 통해) 해서 그 다음 목록을 보여줄 필요가 있다.
이것을 할 수 있는 방법이 바로 페이지네이션과 인피니티스크롤이다.
둘다 역할은 비슷하지만, 차이점이라고 한다면 페이지네이션은 정해진개수의 페이지목록만 볼수 있기 때문에 이전페이지로 돌아가려면 다시 일정 범위 이상의 목록을 클릭해서 내가원하는 목록을 볼수 있는 범위의 페이지로 돌아가야된다는 것이고
(10개의 목록만 보여줄수 있다고 가정할 때, 내가현재 11-20페이지를 보고 있는 경우, 3페이지를 보려면 이전목록을 통째로 불러와야 한다.)
인피니티스크롤은 여태껏 쌓인 모든 목록을 볼 수 있다는 정도?(10개씩 불러와서 한화면에 모두 쌓이기 때문에 스크롤만 올리며 된다.)
- 페이지네이션의 장점 : 사용자의 의도에 맞게 페이지를 넘길 수 있다.
특정한 콘텐츠를 찾을 때 유용한 방법이다.
- 페이지네이션의 단점 : 추가적인 작업이 필요할 때 다음, 또는 이전 이라는 버튼을 찾아 새 페이직 로드될 때 까지 기다려야한다. 무한스크롤에 비해 참여도가 떨어질 수 있다.
- 무한스크롤(IfiniteScroll)의 장점 : 사용자가 웹페이지에 더 오래 남아있게 할 수 있기때문에 참여도를 높힐 수 있다, 페이지의 로딩을 기다리지 않고 정보를 탐색할 수 있는 효율적인 방법이다.
- 무한스크롤의 단점 : 데이터가 쌓이다 보면 당연하게도 페이지 성능이 떨어질 염두가 있다, 특정항목을 찾거나 원래 위치로 돌아오기 힘들다.
생각은 나중에..