Infinity Scroll(무한 스크롤)을 어떤식으로 구현해 볼까 찾아보던 중, 대부분 react를 사용하고 있었다.
나는 아직 react에 대한 공부가 제대로 되어있지 않기 때문에, observerAPI를 사용하여 infinityScroll를 비동기 방식처럼 만들어보려고 한다.
Intersection Observer API
Intersection Observer는 교차 관찰자라는 뜻인데, Intersection Observer API는 관찰 중인 요소(element)가 뷰포트(viewport)와 교차하고 있는지를 감지하게 된다.
사용 방법은, new Intersectionobserver(callback, options)로 객체를 생성한 후, 관찰 대상을 지정하여 관찰한다. 객체를 생성하게 되면 세 가지 옵션을 설정할 수 있게된다.
- root : 관찰 대상이 화면에 들어왔음을 감지. 기본값은 null(viewport)이다.
- rootMargin : 관찰 대상을 감지하는 영역을 바깥 (margin) 범위까지 확장한다. 기본값은 0px 0px 0px 0px 이다.
- threshold : 관찰 대상이 화면 내에 얼마나 들어 왔을 때 콜백 함수를 호출할 지 결정하는 값이다. 기본값은 0이고 최대값은 1까지 가능하다. 예를 들어 0.8이라고 지정해두면 감찰대상이 화면에 80%정도 보이기 시작할 때 콜백 함수를 호출하게 된다.
이 Intersection Observer API를 사용하여 이제 마지막요소를 감찰대상으로 지정하고 그 요소가 80%정도 보일 때 또 다른 요소를 생성하는 방식으로 무한스크롤을 구현해 보겠다!
본격적인 구현
HTML/CSS
html과 css는 귀여운 농담곰을 사용하여 12가지 요소를 만들었다. 이제 observerAPI를 사용하여 마지막 요소를 감지 대상으로 지정하고, 그 요소의 80%가 감지되었을 때, 새로운 요소를 추가시켜 보겠다.
JS
새로운 요소 dom 생성하는 부분은 생략하고 주제에 맞는 Intersection Observer를 사용하는 부분을 작성하겠다.
우선 새로운 InersectionObserver 객체를 생성하고, 거기에 감지대상이 감지되었을 때 사용할 콜백함수와 해당 요소를 얼마나 감지했을 때 발생할지 threshold로 감지한다.
threshold를 0.8, 즉 감지대상의 80%를 감지했을 때 ioCallback함수라는 내가 생성해 둔 콜백함수를 불러오게 만들었다.
★ 그렇다면 감지대상은 무엇을 어떻게 지정했는가??
각각 농담곰 요소들마다 card라는 클래스를 넣어두었고, 요소들 중 가장 마지막에 있는 요소를 찾아 감지대상으로 지정하였다.
★ 감지대상이 감지되었을 때 무엇을 발생시키는가??
앞서 설명했듯, ioCallback이라는 콜백함수를 실행시키는데, forEach로 각각의 요소들을 탐색하며 감지대상을 찾고, 감지대상의 타겟을 풀어준 후, 새로운 요소들을 생성하여 만드는 함수들을 실행시킨다. 그 후 새로 만들어진 요소들 중 또 마지막 요소를 찾아 감지대상으로 설정한다.
이런식으로 만들어진 요소들은 계속하여 감지대상을 바꾸고 새로운 요소들을 생성하며 무한 스크롤을 구성할 수 있게 된다.
결과물
지금까지 InersectionObserver를 사용하여 무한스크롤을 구현 해 보았다.
무한스크롤을 구현하는 더 많은 방법이 있을 것 같다. 더 찾아보고 공부하여 다음에도 꼭 블로그를 작성하겠다.
