스크롤을 내리면 새로운 컨텐츠 불러오기(lazy loading)

youtube api를 이용해서 유튜브 검색 결과를
AJAX를 통해 받는 작업을 하고 있다.

그런데 검색 결과를 한번에 엄청나게 가져온다면 웹에 크나큰 부담이
될 것이고 그렇게 할 필요도 없다.

초기에 10개의 검색결과만 불러오고 스크롤을 아래로 끝까지 내리면
새로운 10개를 불러올 수 없을까?

✨ 문제 해결

나는 스크롤 끝부분에 빈 div를 두어 이 문제를 해결했다.

위 이미지를 보면
id가 search-result__intersection인 div가 아래에 있다.
항상 검색 목록의 끝부분에 위의 div를 두고
js에서는 intersectionObserver로 해당 div가 뷰포트 내에 보이는지 감시한다.
만약 보인다면 새로운 AJAX 요청을 보내고 새로운 검색결과를 받아 추가로 렌더한다.

⚠️ 여기서 주의할 점!
intersectionObserver의 인식기능을 사용하고 싶지않을 때
css 속성
visibility: hidden을 사용하면 옵저버에 반영되지 않고(옵저버가 인식함)
display: none 인 경우에는 옵저버에 반영된다.
(이것때문에 살짝 고생했다...ㅠ)

📦 intersectionObserver 코드 구성

const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.intersectionRatio > 0) {
          console.log("보임");
        }
      })
    }, {})
    observer.observe($searchResultIntersection);

여기서 entries라는 배열로 인자를 받는 이유는 옵저버에 여러 엘리먼트를 등록할 수 있기 때문이라고 한다.

참고

intersectionObserver mdn