React> Pagenation vs Infinite Scroll

bueong·2022년 3월 2일
0

React

목록 보기
2/2

리액트에서 서버에서 많은 자료를 받아서 사용자 화면에 보여줄 수 있는 페이징 기법을 적용하기 위한 방법이 크게 두가지가 있는데, 페이지네이션 과 무한 스크롤이다.

Pagenation/infinite Scroll 비교

페이지네이션과 무한 스크롤은 많은 자료들을 사용자가 편리하게 볼 수 있게 하는 기법이라는 것이 동일하다. 하지만 둘의 차이점들이 있는데, 페이지네이션은 우리가 흔히 볼 수 있는 게시판을 생각하면 된다. 페이지 하단에 페이지 번호가 나열되어 있고, 현재 페이지를 알려주고 원하는 페이지를 클릭하면 화면이 전환되면서 그 페이지의 정보들을 보여준다. 페이지 내용이 많거나 깔끔하게 페이지를 구분하고 싶을 때 좋다. 전에 확인했던 내용이 특정 위치 혹은 어느 쯔음에 존재하는지 알고있다면 빠르게 재접근이 가능하다.

그에 반해 무한 스크롤은 태블릿이나 모바일 기기등을 고려한 최근 사이트등에서 확인할 수 있다. 모바일 기기나 피시에서 해당 사이트의 스크롤을 계속 내리면 중간중간 계속 새로운 정보들을 불러와서 무한히(정보가 끝날 때 까지) 스크롤을 내릴 수 있다. 처음부터 모든 데이터를 불러 오는 것이 아니라 로딩시간이 너무 오래걸리지 않고, 간편하게 스크롤을 내리는 것으로 모든 정보를 볼 수 있다는 장점이있다. 또한 페이지네이션처럼 페이지넘버를 위한 자리를 만들지 않아도 되니 더욱 깔끔하게 사이트를 제작할 수 있다. 대신 특정 정보만을 접근하려고 할때 데이터가 끝 쪽에 있다면 검색기능을 사용하지 않고는 계속 스크롤을 내려서 찾아야하기 때문에 재접근이 어렵다.

결론

페이지네이션 과 무한스크롤은 각각 장단점이 존재하고 우위가 존재하는 기술이라기 보다는 상황에 맞게 적재적소에 사용해야 한다. 페이지를 분명히 나누고 과거 데이터와 현재 데이터를 구분해 빠르게 찾아갈 수 있게 하기에는(게시판과 같은) 페이지네이션이 유리하고, 모바일 친화적이고 깔끔한 UI를 원하고 상품 정보들과 같이 해당하는 데이터들을 나열만 하면 된다면 무한 스크롤이 좋은 선택이 될 것이다.

profile
프론트엔드 개발자를 목표로 공부중입니다 🧐

0개의 댓글