• 요구사항 : 스크롤 페이징 구현 + 코드 구조 관

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

• api /cats/serch?q=${keyword}&page=${page}
• SearchResult.js에서 작업.
• 목록의 마지막 요소가 보였을 때 api 로드.
• 화면에 보이는지 안보이는지 감지 필요.

엘리먼트의 크기와 뷰포트 정보 구하기 + 스크롤 이벤트 걸기

<aside> 💡 **Element.getBoundingClientRect() :**메서드는 엘리먼트의 크기와 뷰포트에 상대적인 위치 정보를 제공하는 DOMRect 객체를 반환.

https://developer.mozilla.org/ko/docs/Web/API/Element/getBoundingClientRect

</aside>

• 엘리먼트의 좌표로 계산하기. + 이미지의 top, left, bottom, right로 계산.

// 요소가 화면에 보이는지 여부 확인.
isElementInViewport(el){
  const rect = el.getBoundingClientRect();
  return(
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

• 모든 item에 스크롤 이벤트를 걸어줌. 단, 퍼포먼스적인 측면에서 문제있음. 스크롤이 조금만 움직여도 이벤트 발생.

// 스크롤 이벤트
**applyEventToElement = (items) => {
  document.addEventListener('scroll', () => {
    items.forEach(el => {
      console.log(el);
			this.isElementInViewport(el);   //화면에 현재 엘리먼트가 보이는지 확인.
    })
  })
}**

  render() {
    this.$searchResult.innerHTML = this.data
      .map(
        cat => `
          <li class="item">
            <img src=${cat.url} alt=${cat.name} />
          </li>
        `
      )
      .join("");

    this.$searchResult.querySelectorAll(".item").forEach(($item, index) => {
      $item.addEventListener("click", () => {
        this.onClick(this.data[index]);
      });
    });

    **let listItems = this.$searchResult.querySelectorAll(".item");
    this.applyEventToElement(listItems);**

  }
}

마지막 요소가 화면에 보이는 시점 확인.

• this.isElementInViewport(el) : 해당 엘리먼트가 화면에 나오면서 == 화면에 현재 엘리먼트가 보이는지 확인.
• items.length - 1 === index 마지막 요소에 이벤트가 걸릴 때 == 마지막 인덱스일 때

// 요소가 화면에 보이는지 여부 확인.
**isElementInViewport(el){
  const rect = el.getBoundingClientRect();
  return(
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}**
  
// 스크롤 이벤트
applyEventToElement = (items) => {
  document.addEventListener('scroll', () => {
    items.forEach((el, index) => {
      **if(this.isElementInViewport(el) && (items.length - 1 === index)){**   
        // 해당 엘리먼트가 화면에 나오면서 == 화면에 현재 엘리먼트가 보이는지 확인.
        // 마지막 요소에 이벤트가 걸릴 때 == 마지막 인덱스일 때
        **console.log('마지막!', el)**
        // 다음 페이지 호출.
      **}**  
    });
  })
}

  render() {
    this.$searchResult.innerHTML = this.data
      .map(
        cat => `
          <li class="item">
            <img src=${cat.url} alt=${cat.name} />
          </li>
        `
      )
      .join("");

    this.$searchResult.querySelectorAll(".item").forEach(($item, index) => {
      $item.addEventListener("click", () => {
        this.onClick(this.data[index]);
      });
    });

    let listItems = this.$searchResult.querySelectorAll(".item");
    this.applyEventToElement(listItems);

  }
}

스크롤 이벤트 App.js에 등록

• onNextPage() : api 수정은 없이 일단, 새로운 데이터가 추가되면 다음 목록에 이어 붙이게 만들기.