무한 스크롤 이란?
정보를 한꺼번에 가져와서 보여주기엔 정보량이 많거나 무거워서 api fetch로 받는 결과가 느릴 때, 스크롤을 통해 아주 작은 일부분만 가져와 추가로 보여주면서 사용자 경험을 높이는 기술이자 인터페이스
페이지네이션과 무한 스크롤의 비교
| 페이지네이션 | 무한 스크롤 | |
|---|---|---|
| 장점 | - 사용자 의도에 맞게 페이지를 넘길 수 있다. - 사용자가 페이지에 통제감을 느낄 수 있다. - 특정 항목의 위치를 파악 및 찾기가 쉽다. | - 사용자 참여 및 콘텐츠 탐색이 쉽다. - 클릭하는 것보다 더 나은 사용자 경험을 제공한다. - 모바일에 적합하다. |
| 단점 | - ‘클릭’ 혹은 ‘다음페이지’를 클릭해야되는 번거로움이 있다. - 한페이지에서 매우 제한된 내용을 본다. | - 페이지 성능이 느려진다. - 특정 항목 검색 및 원래 위치로 되돌아오기 힘들다. - 스크롤 막대가 실제 데이터양을 반영하지 못한다. - 푸터를 찾기 어려워진다. |
무한 스크롤 구현
Scroll Event
-
window.addEventListener('scroll', function(){})으로 window 객체에 scroll 이벤트가 발생하면 불리는 function 은 스크롤을 조금만 내려도 계속해서 호출된다. 이 핸들러 함수가 불리는 횟수를 최적화 하기 위해debounce또는throttle,rAF (requestAnimationFrame)을 사용하여야 한다. -
documentElement.scrollTop,documentElement.offsetHeight의 최신 값을 읽기 위해서 브라우저가 렌더링 큐에 쌓인 모든 작업을 수행하면서reflow를 발생시킬 수 있다.
Intersection Observer API
타겟과 viewPort 사이의 intersection 변화를 비동기적으로 관찰하는 방법
-
요소의 가시성을 관찰할 수 있고, 해당 요소의 가시성에 대한 변화가 일어날 때마다 우리가 설정한 콜백함수를 실행시켜준다.
-
Intersection 정보 활용처
- 페이지를 스크롤 할 때 이미지 또는 기타 콘텐츠의 lazy-loading
- 사용자가 페이지를 넘길 필요가 없도록 스크롤할 때 점점 더 많은 콘텐츠가 로드되고 렌더링되는 무한 스크롤 웹 사이트 구현
- 광고 수익 계산을 위한 광고 가시성 보고
- 사용자에게 결과가 표시되는지 여부에 따라 작업 또는 애니메이션 프로세스를 수행할 지 여부를 결정
Intersection Observer API 로 구현하기
Intersection Observer 객체
const observer = new IntersectionObserver (callback, options);
parameter
callback: target 과 root 요소가 교차 시 발생되는 callback 함수
- entries:IntersectionObserverEntry객체들을 배열로 반환
- observer:IntersectionObserver instance
options: target 요소와 root 요소의 교차 정도, 관찰대상(target)의 부모요소(root)를 지정하는 객체
- root: target의 교차 기준이 되는 요소. observer의 상위 엘리먼트여야함. 지정하지 않으면 viewPort (default: null)
- rootMargin: root로 지정된 엘리먼트의 margin 값 설정 (default: 0px)
- thredhold: target 요소와 root 요소 간의 교차 정도(default: 0)
Methods
IntersectionObserver.observe(target): 관찰 시작IntersectionObserver.unobserve(target): 관찰 종료IntersectionObserver.disconnect(target): 관찰 멈추기
구현 코드
react-window
- 스크롤을 계속 내려서 데이터가 쌓이게 되면 브라우저에 생성되는 DOM은 계속해서 추가되어 브라우저는 버벅이게 되고 사용자의 ux가 나빠질 수 있다.
- 현재 viewport 에 위치한 DOM 만 보여주고 나머지는 DOM 에서 제거하기 위해
react-window사용
참고
- https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
- https://velog.io/@yejinh/Intersection-Observer%EB%A1%9C-%EB%AC%B4%ED%95%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0
- https://velog.io/@eunoia/%EB%AC%B4%ED%95%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4Infinite-scroll-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0
