16. Pagination과 Infinite scrolling

Pagination과 Infinite scrolling

Pagination과 Infinite scrolling은 page를 처리하는 대표적인 방법들로 널리 사용되고 있다.

 

 

Pagination

페이지네이션은 페이지 번호를 클릭해서 이동하는 방식으로 페이지를 이동하는 방식으로 블로그의 게시판 등에 많이 사용된다, 

 

예시 화면

 

위 이미지의 밑의 번호들을 클릭하면 게시판 목록을 이동할 수 있듯이 이런 형태로 많이 사용되곤 한다.

 

우리에게 익숙한 방식이기에 구현이 쉬울 것 같지만 여러가지 처리해 줘야할 예외사항이 존재하며 이를 처리해 주어야 한다. 

예를 들어 10개씩 페이지 목록을 출력하다가 마지막에 7개의 페이지만 남았을 때나 다음 버튼을 눌러 다음 10개의 페이지를 출력할 때 마지막 페이지에서 어떻게 처리할지 등 다양한 예외를 마딱드리게 된다.

 

위의 예시는 274개의 페이지들이 있고 10장씩 페이지 목록을 넘겨 줬을때 마지막 앞의 페이지 목록에서 265~270과 같이 마지막 페이지 보다 큰 페이지로 페이지가 넘어가서 텅빈 페이지를 보여주는 것을 막기 위해 else문을 구성했다. 이로 인해서 마지막 페이지 목록에서 다음 페이지 목록으로 넘어가려고 하는 예외를 버튼의 disabled로 처리해야 했다.

 

무한 스크롤(infinite scroll)

무한 스크롤은 Pagination과 마찬가지로 페이지를 관리하는 방법 중 하나로 주로 앱에서 많이 쓰인다.(ex) 페이스북, 인스타 등) 스크롤을 내려서 끝에 닿으면 새로운 페이지들을 전의 페이지에 아래로 출력해주는 방식으로 주로 리액트에서는 react infinite scroller를 사용하거나 react infinite scroller components를 사용합니다.

 

사용 예시

 

위에서 볼 수 있듯 기본 스크롤 바 이외의 스크롤 바에서도 적용할 수 있으며 이를 통해서 페이지의 끝까지 한 번에 볼 수 있습니다.

 

 

페이지네이션과 무한 스크롤의 장단점

페이지네이션은 무한 스크롤에 비해서 특정 항목 검색이 쉬우며 페이지 성능을 떨어트리지 않는다는 장점이 있지만 작은 단말에서는 특정 액션(페이지를 선택하는 것 등)을 취하는 것에 적합하지 않아 모바일에서 사용이 불편한 경향이 있습니다.

 

무한 스크롤은 별다른 액션 없이 계속해서 다음 페이지를 불러올 수 있기 떄문에 모바일 기기에서 널리 사용된다는 장점이 있지만 지나간 특정 페이지로의 복귀가 굉장히 어렵다는 단점이 있습니다.

 

따라서 이러한 장단점을 잘 구분해서 페이지를 관리하는데 적합한 것을 적용해야 할 것입니다.