> Week 6. 무한스크롤과 intersection observer

무한 스크롤

모바일 환경에서 많이 사용됨.

주의할 점

• 데이터 fetching 중(로딩 중) 스크롤을 올렸다내렸다 할 경우 계속 불러와짐
  👉🏻 state 값에 isLoading을 넣어 fetching이 끝났을 경우에만 다시 데이터 요청하도록 처리
• scroll 이벤트가 발생할 때마다 값을 체크해야 함
  👉🏻 throtling 처리로 일정 시간마다 이벤트가 발생하도록 처리.

구현 방식

1. 스크롤 이벤트로 계산
   화면 전체 height와 스크롤 위치로 스크롤이 컨텐츠 끝에 다다랐는지 체크해서 처리하는 방식

장점

• IE에서도 사용이 가능하다.

문제점

• 전체 컨텐츠를 내려받았음에도 끝에 닿으면 데이터 요청을 함.
  👉🏻 전체 콘텐츠의 길이가 담긴 API로 방어코드를 넣어주기
  👉🏻 그게 아닐 경우... 복잡...?

2. intersection observer 방식
   내가 지정한 DOM 객체(observer)가 보고 있는 viewport 시야(기본값)에 닿았는지 감지하는 방식

   MDN: Intersection Observer API
   그들이 감시하고자 하는 요소가 다른 요소(viewport)에 들어가거나 나갈 때
   또는 요청한 부분만큼 두 요소의 교차부분이 변경될 때 마다 실행될 콜백 함수를 등록할 수 있게 한다.

const observer = new InterSectionObserver(callback, options);

const callback = entries => entries.forEach(entry => { 
  // entry 대상 여러개 지정 가능
  entry.isIntersecting && console.log(화면 끝!, entry)
})

const options = {
  root: // 기본: null(= viewport), 감시할 요소를 제한시킬 때 상위 부모를 넣기
  rootMargin: // root가 가진 여백. 여유를 주는 것.
  threshold: // 가시성 퍼센티지. 요소가 몇 만큼 보여졌을 때 탐지할 것이냐 - 🧐 
}

// 감시할 요소: observer.observe(감시 대상)
// 앞의 감시 요소 풀어주기: observer.unobserve(감시 풀 대상)

활용: 이미지 지연 로딩 등

• 실제로 화면에 보이는 이미지만 바로 불러오는 기법
• 브라우저마다 한번에 불러오는 이미지 개수가 다름.

주의할 점

1. 이미지 무한 스크롤 시, 이미지의 min-height를 지정해주기.

• 이미지가 붙어서 내려오면 스크롤이 끝난 걸로 인식할 수 있음.
• min-height를 붙여줘 처음 렌더링 시 스크롤이 생기도록 만들어주는 것!!

2. observe, unobserve 주의

장점

• 매번 scroll 이벤트를 걸지 않기 때문에 성능 이슈가 줄어듬
• 스크롤 길이를 계산할 필요가 없어 직관적

단점

• IE에서 사용불가하므로 폴리필이 필요함.

느낀점

무한 스크롤이 실무에서 굉장히 많이 사용되고,
기업 구현 문제에서도 단골문제로 나오는 걸로 알고 있는데
구현하는게 까다롭지 않고 intersection observer로 간단히 만들 수 있어서
의외로 놀랐다(!)