무한 스크롤 구현 방식

스크롤 이벤트

> window.addEventListener('scroll'()=>{
  //전체 화면의 높이 
const displayedContentHeight = document.body.offsetHeight;
  // 현재 화면에 표시된 높이
const windowHeight = window.innerHeight;
  // 스크롤 된 높이
const scrollHeight = window.scrollY;
  
  // 컨텐츠 제일 가장 부분이 보이는지에 대한 변수
const isScrollReachedEnd = windowHeight + scrollHeight >= displayedContentHeight;
  
  if(isScrollReachedEnd){
  	loadMoreContents();
  }
})

intersectionObserver

intersectionObserber란 ?

화면에 표시되는지에 대한 감시자 역할을 하는 객체이다.

intersectionObserber의 생성

const obserber = new IntersectionObserber(function(entries){});
// 첫번째 인자로 들어오는 것은 감시하는 Element의 배열을 인자로 받는 함수가 들어온다.

감시하는 Element 생성과 제거

	observer.observe(); // 생성
	obserber.unobserve(); // 추가

intersectionObserver의 사용

function(entries){
  entries.forEach(entry=>{
    console.log(entry.isIntersecting);
    if(entry.isIntersecting){
    console.log(`화면에 ${entry}가 보입니다.`)
      loadMore();
    }
    //해당 감시 요소가 화면에 표시되는지에 대한 불린형 값
  })
}

isIntersecting을 이용해서 화면에 보일경우 컨텐츠를 더 불러오는 식으로 할 경우 스크롤 이벤트보다 퍼포먼스가 향상된다.

Throttle,Debounse의 차이점

Throttle의 경우 이벤트가 반복적으로 발생할경우 처음 이벤트를 실행시키는 것이고 Debounse의 경우 이벤트가 반복적으로 발생할 경우 가장 마지막 이벤트를 실행시키는 방식을 말한다.

느낀점

평소에 아무 생각없이 사용하던 UI가 이런 복잡한 원리로 동작하는 것을 알게되었다. 서비스를 이용하면서 전에 보이지 않던 UI의 동작원리를 생각하게되는 계기가 된 것 같다.