무한스크롤(infinite-scroll)

 

 

 

 

무한스크롤(infinite-scroll)이란?

   - 많은 양의 데이터를 편리하게 보기 위한 페이징 방법 중 하나입니다.

   - 페이지 하단에 도달했을 때, 일정량의 콘텐츠를 로드시켜주는 UX 방식입니다.

 

 

 

 

무한 스크롤의 장점

   - 사용자 접근성 및 콘텐츠 탐색이 쉽습니다.

   - 모바일일때 특히 더 나은 사용자 접근성을 제공합니다.

   - 다음 콘텐츠 탐색을 위한 추가클릭이 없으며, 더 짧은 로드시간을 제공합니다.

 

 

 

 

무한 스크롤의 단점

   - 많은양의 데이터를 다루게 되므로 페이지 성능이 점점 떨어집니다.

   - 맨 아래영역, footer를 확인하려면 모든 콘텐츠를 로드해야하므로 힘들어집니다.

   - 특정 항목을 찾기 어려우며, 원래 위치로 되돌아가기 힘듭니다.

 

 

 

 

페이지네이션과의 차이

   - 무한 스크롤이 사용자 접근성에서는 더 좋습니다.

      > 매번 페이지 탐색을 위해 클릭을 하지 않아도 되며, 모바일에서 더욱 큰 차이를 보입니다.

   - 특정 글을 찾거나 많은 글을 볼 때 페이지의 성능 저하가 싫다면 페이지네이션이 낫습니다.

 

 

 

 

비동기를 이용한 무한스크롤 구현하기

   - 무한스크롤의 원리는 페이지 하단에 도달했을때, 스크롤 이벤트와 API 통신을 이용해

      지정된 양 만큼의 콘텐츠를 불러오는 것입니다.

   - 이렇게 불러온 콘텐츠를 페이지 리스트에 합치면 완성됩니다.

   - 리액트에서 useRef hook을 사용하거나 javascript에서 스크롤 이벤트를 사용하여 콘텐츠를 불러올 수 있습니다.