Day26

Day26

무한 스크롤 UI 구현하기

• 모바일 환경을 가정한다.
• 무한 스크롤이란?
  • 컨텐츠를 페이징하는 기법 중 하나로, 아래로 스크롤하다가 컨텐츠의 마지막 요소를 볼 때쯤 다음 컨텐츠가 있으면 불러오는 방식
  • Facebook, Twitter, Instagram에서 많이 사용된다.
• 구현 방식
  • window의 scroll 이벤트를 통해 스크롤링이 일어날 때마다 화면 전체의 height와 스크롤 위치를 통해 스크롤이 컨텐츠의 끝 즈음에 다다랐는지 체크해서 처리하는 방식
  • intersection observer 방식 : 내가 지정한 DOM요소가 사용자가 보고 있는 시야에 닿았는지 감지하여 처리하는 방식
• 컴포넌트 구조

• 불러온 데이터를 photoList라는 이름으로 PhotoList 컴포넌트에 내려줌.
• PhotoList 컴포넌트에서는 스크롤이 그리는 화면의 끝에 거의 다다랐으면 App에서 넘겨준 onScrollEnded 콜백 함수를 실행시킨다.
• 사용할 API

  // limit : 한 번에 가져올 고양이 사진의 개수, 5로 고정
  // start : 몇 번째 사진부터 가져올 건지
  https://mwu.roto-frontend.programmers.co.kr/cap_photo?_limit=${limit}&_start=${start}