무한 스크롤(Infinite Scroll)

많은 데이터를 한 화면에 전부 보여줄 수 없는 경우에 무한 스크롤, 페이지네이션이 사용된다.

 

무한 스크롤

- 한 페이지를 아래로 스크롤 하면 끝없이 새로운 화면을 보여준다.

- 화면이 작은 모바일에 적합하다.

 

페이지네이션

- 콘텐츠를 여러 개의 페이지로 나누어 보여준다.

- 상대적으로 PC에 적합하다.

 

무한 스크롤

무한 스크롤을 구현하는 방법은 여러 가지가 있겠지만 페이지 맨 마지막 요소에 도달하면 다음 데이터를 불러오는 방식이 있는데,

 

scroll event와 IntersectionObserver을 사용하여 구현할 수 있다.

 

scroll event

scroll event는 보통 document에 스크롤 이벤트를 등록하고, 특정 지점(스크롤 최하단)을 관찰하며 엘리먼트가 위치에 도달했을 때 실행할 콜백함수를 등록하는 방식으로 무한 스크롤을 구현한다. 

 

하지만 이 방식은 코드들이 모두 메인 스레드에서 실행되고 사용자가 조금만 스크롤을 움직여도 수백 번, 수천번 호출될 수 있어 성능에 안 좋은 영향을 미칠 수 있어 throttle를 이용한 최적화를 시키는 것이 일반적인 방법이었다.

 

throttle

여러 번 발생하는 이벤트를 일정 시간 동안, 한 번만 실행되도록 만드는 개념

scroll event와 같이 잦은 이벤트를 막아 성능상의 유리함을 가져올 수 있다.

 

---

Intersection Observer

Intersection Observer의 등장으로 위와 같은 문제를 해결할 수 있게 되었다. MDN에서는 IntersectionObserver를 아래와 같이 정의하고 있다.

Intersection Observer API는 대상 요소가 상위 요소 또는 최상위 문서의 뷰포트와 교차하는 변경 사항을 비동기식으로 관찰하는 방법을 제공합니다 .

 

IntersectionObserver는 요소의 가시성을 관찰할 수 있고, 해당 요소의 가시성에 대한 변화가 일어날 때마다 우리가 설정한 콜백함수를 실행시켜준다. 이 경우에는 웹 사이트는 요소의 교차를 파악하기 위해 메인 스레드를 사용할 필요가 없어지므로 성능상의 유리함을 가져올 수 있다.

let options = {
root: document.querySelector('#scrollArea'),
rootMargin: '0px',
threshold: 1.0
}
let observer = new IntersectionObserver(callback, options);

출처: https://im-developer.tistory.com/196 [Code Playground]

 

Intersection Observer API는 위와 같이 callback 함수와 옵션 객체를 인자로 받는다.

 

• Callback: target이라고 불리는 특정 요소가 device의 viewport나 특정 요소(옵션의 root)에 교차되었을때 callback 함수가 실행된다.
• options:
  
  • root: target의 visibility를 검사하기 위한 viewport로 사용될 요소로 target의 상위 요소여야만 한다. 
    • 기본값: browser viewport (아무 값도 설정하지 않거나 null로 설정할 경우 browser viewport를 기본값으로 한다.)
  • rootMargin: root 주변의 margin을 말하며, CSS의 margin 속성과 비슷하게 "10px 20px 30px 40px" (top, right, bottom, left)로 줄 수 있다. %값으로도 줄 수 있으며 이 값에 의해 root 요소의 박스 모델을 기준으로 범위가 늘어나거나 줄어들거나 한다.
    • 기본값: 0px
  • threshold: 단일 숫자이거나 숫자가 든 배열을 지정할 수 있다. target 요소와 root 간의 intersection 비율을 말한다. (target 요소가 얼마나 보여지는지 0 ~ 1의 비율로 나타낸 값)
    • 만약 50% 정도만 교차되었을 때 콜백 함수를 실행시키고 싶다면 0.5를 지정하면 된다.
    • 0은 1 px이라도 보여지면 콜백을 실행시킨다는 뜻이고, 1은 모든 px이 전부 화면에 보여져야만 콜백을 실행시킨다는 뜻이다.
    • 기본값: 0