무한 스크롤 구현

무한 스크롤을 구현하는 방식은 2가지가 있다.

 

1. 스크롤 이벤트
예전 방식이고 계속 이벤트를 발생시키기 때문에 브라우저에 부하가 걸릴 수 있다.

2. IntersectionObserver 인터페이스
요즘 방식이고 부하가 발생하지 않는다. 이 방식으로 구현하는 것을 추천!

 

동작 방식을 간단하게 설명하면 다음과 같다.

 

첫 페이지 리스트를 출력하고 리스트의 하단에 div를 만들어둔다. 여기서는 listEnd div.

브라우저에서는 현재 사용자가 보고 있는 화면을 감지할 수 있는데,

IntersectionObserver 객체의 observe함수를 이용해서 특정 div를 관찰할 수 있다(observe).

스크롤을 내리다가 observe중인 div가 들어오면 이벤트를 발생시킨다.

 

이벤트를 발생할 함수(getGuestbookList)에서 리스트 데이터를 return 하도록 하자.

내 경우엔 ajax로 데이터를 가져오는 경우라서 async: false 옵션을 주어서 동기로 작동하도록 하였다.

이렇게 하지 않으면 ajax로 데이터를 받아오기 전에 return을 해버린다.

데이터가 더 이상 없을 경우엔 unobserve를 실행해서 더 이상 이벤트가 발생하지 않도록 해준다.

 

<!--html 부분-->
<ul class="cmt_list_wrap" id="guestbookList">
</ul>
<div id="listEnd"></div>

 

// js 부분
const listEnd = document.querySelector('#listEnd');
const options = {
    root: null,
    rootMargin: '0px 0px 0px 0px',
    threshold: 0,
};

let page = 0;
const onIntersect = (entries, observer) => {
    entries.forEach(async (entry) => {
        if (entry.isIntersecting) {
            // console.log('무한 스크롤 실행');
            page++;

            // 이벤트를 발생할 함수
            const products = getGuestbookList(page);
            
            // 데이터가 없을 때
            if (products.length < 1) {
                observer.unobserve(listEnd);
                return;
            }
        }
    });
};

const observer = new IntersectionObserver(onIntersect, options);
observer.observe(listEnd);

 

이 방법으로 하면 간단하게 무한 스크롤을 구현할 수 있다.