자바스크립트에서 무한스크롤 UI를 구현하는 방식을 살펴보면서, 무한스크롤을 구현할 때 사용하면 좋은 디바운스와 쓰로틀 방식까지 알아보려 한다.
무한스크롤
무한스크롤은 페이스북, 인스타그램 등에서 주로 볼 수 있는 방식으로, 아래로 스크롤하다가 마지막 컨텐츠를 볼 즈음 다음 컨텐츠를 불러오는 페이징 기법이다.
무한스크롤 구현방법
바닐라 자바스크립트에서 무한스크롤 UI를 구현하는 것에는 크게 2가지 방식이 있는데,
window의 scroll 이벤트를 통해 구현하는 방식, 그리고 intersection observer API를 사용하는 방식이 있다. intersection observer api는 scroll 이벤트보다 간결하고 빠르지만, 구형 브라우저나 IE에서는 지원하지 않는다는 단점이 있다.
무한스크롤을 구현할 때 주의할 점으로는 컨텐츠의 크기와 분량을 잘 계산하여 구현하여야 하고, 쓰로틀을 이용하여 성능을 향상시킬 수 있다.
window.scroll 이벤트
window의 scroll 이벤트를 통해 페이지의 height와 스크롤 위치를 계산하여 다음 컨텐츠를 불러오는 방식이다.
- 예시)
(window.innerHeight + window.scrollY) + 200 >= document.body.offsetHeight;window.innerHeight브라우저의 뷰포트(보여주는 화면)의 높이window.scrollY스크롤 바의 위치로, 얼만큼 스크롤 됐는지를 알려준다.document.body.offsetHeightdocument의 높이
예시를 통해 간단히 작동법을 설명하자면, 스크롤바 위치와 뷰포트의 높이를 더해 현재 위치를 구하고, 현재 문서의 높이만큼 내려왔다면 새로운 문서를 불러오는 것이다. + 200은 맨 끝까지 닿지 않아도 불러올 수 있도록 하는 여유공간이다.
intersection observer API
intersection observer API는 지정한 객체(아래 예시에서는 observer)가 뷰포트나 특정 요소에 도달했을때 콜백을 호출하는 방식이다.
let options = {
root: document.querySelector('#scrollArea'),
rootMargin: '0px',
threshold: 1.0
}
let observer = new IntersectionObserver(callback, options);2번째 인자로 옵션을 받을 수 있는데, 옵션의 기능은 다음과 같다.
- root: 객체가 보여지는 것을 확인할 뷰포트를 칭하며, 객체의 조상요소여야 한다.
- rootMargin: root의 여백으로, margin과 같은 방식("10px 10px 10px 10px")으로 적용한다
- observer가 얼만큼 보여졌을 때 호출이 일어나는지를 정한다. 기본값은 0이며, 0.5일 경우 50%만 보여도 콜백이 호출되고, 0일경우 1px만 보여도 호출되는 형식이다.
디바운스와 쓰로틀
디바운스와 쓰로틀은 공통적으로 이벤트(event)를 제한하여 성능을 향상시키는 방법이다. 같은 이벤트가 여러번 생성되는 경우에 유용하며, 앞서 소개한 무한스크롤 같은 방식에서 많이 쓰인다.
다만 디바운스는 같은 이벤트를 지연시키면서 마지막 이벤트만 실행시키는 방식이고, 쓰로틀은 맨 처음 이벤트만 실행시키고 이후의 이벤트를 무시하는 방식에서 차이점을 가진다.
주로 setTimeout과 clearTimeout을 이용해 사용하며, 쓰로틀의 경우 isLoading 등의 boolean값을 가지는 변수를 만들어 사용할 수도 있다.
