검색 결과 화면에서 유저가 브라우저 스크롤 바를 끝까지 이동시켰을 경우, 그 다음 페이지를 로딩하도록 만들어야 합니다.

• 문제점 : 스크롤 이벤트가 자주 일어남 별도의 디바운싱이나 쓰로틀링을 해야한다. 퍼포먼스적인 문제도 생김. 메모리 낭비가 생기는 중. 사용자의 경험도 좋지않다.
• 기존 방식. App.js
• 기존 방식. SearchResult.js
• 기존 방식.api.js

IntersectionObserver활용.

<aside> 💡 IntersectionObserver MDN

Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document 의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법 https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API

</aside>

SearchResult.js > 옵저버 적용.

class SearchResult {
  $searchResult = null;
  data = null;
  onClick = null;

  constructor({ $target, initialData, onClick, onNextPage }) {
    const $wrapper = document.createElement("section");
    $wrapper.className = "SearchResultList";
    this.$searchResult = document.createElement("ul");
    this.$searchResult.className = "SearchResult";
    $wrapper.appendChild(this.$searchResult);
    $target.appendChild($wrapper);

    this.data = initialData;
    this.onClick = onClick;
    this.onNextPage = onNextPage;

    this.render();
  }

  setState(nextData) {
    this.data = nextData;
    this.render();
  }

  **listObserver = new IntersectionObserver((items, observer) => {  
    items.forEach(item => {
      //아이템이 화면에 보일 때
      if(item.isIntersecting){    

        //화면에 보이면 이미지를 로드한다. data-src 불러오기
        //더미 이미지를 실제 데이터 src로 변환.
        item.target.querySelector('img').src = item.target.querySelector('img').dataset.src;

        //마지막 요소를 찾아낸다.
        //전체 데이터의 길이 : this.data.length 
        let dataIndex = Number(item.target.dataset.index);    //data-index 가져오기
        //마지막 요소라면?
        if(dataIndex + 1 === this.data.length){
          //nextPage 호출.
          this.onNextPage();  
        }
        

      }
    })
  });**

  **render() {
    this.$searchResult.innerHTML = this.data
      .map(
        (cat, index) => `
          <li class="item" data-index=${index}>
            <img src="<https://via.placeholder.com/200x300>" alt="${cat.name}" data-src="${cat.url}" />
          </li>
        `
      )
      .join("");

    this.$searchResult.querySelectorAll(".item").forEach(($item, index) => {
      $item.addEventListener("click", () => {
        this.onClick(this.data[index]);
      });
      this.listObserver.observe($item);   //각 아이템에 observe 등록
    });

  }**
}

이미지 높이 값, 로드 시점 체크

• 처음부터 이미지 src에 로드 되기까지 기다리거나 높이 값이 변경될 때까지 기다리면 화면의 높이 값이 계속 변경되면서, 오류가 생긴다. 높이 값 변경이 되면서 스크롤이 움직임.
• 초기 이미지에 더미 데이터(로딩이미지 같은 것)을 넣어준다.
• css 수정하여 img에 최소 높이 값을 준다.
• 실질적 이미지 url은 data-src라는 곳에 넣어줬다.
• 각 이미지 li태그에 data-index를 넣어 전체 목록 갯수 순차적으로 0~ 넣어준다. 마지막 리스트 여부 확인을 하기 위해 활용 됨.

render() {
    this.$searchResult.innerHTML = this.data
      .map(
        (cat, index) => `
          <li class="item" **data-index=${index}**>
            **<img src="<https://via.placeholder.com/200x300>" alt="${cat.name}" 
									data-src="${cat.url}" />**
          </li>
        `
      )
      .join("");

    this.$searchResult.querySelectorAll(".item").forEach(($item, index) => {
      $item.addEventListener("click", () => {
        this.onClick(this.data[index]);
      });
      **this.listObserver.observe($item);   //각 아이템에 observe 등록**
    });

  }

.SearchResult img {
  width: 100%;
  height: 100%;
  min-height:300px;
  object-fit: cover;
}

• this.listObserver.observe($item); 리스트 랜더링을 하면서 각 요소를 옵저버 등록 시킨다.

observer 동작 확인