진행하고 있는 프로젝트에 infinite scroll (무한 스크롤)을 구현하고 싶어서 공부하게 되었습니다.
우선 최종적으로 만들고 싶은 상황은 다음과 같습니다.
- 서버에서 데이터를 가져온다. (n개씩)
- 스크롤이 하단에 닿으면 로딩을 보여주면서, 다음 데이터를 fetching 한다.
- 더이상 불러올 데이터가 없다면, 로딩하지 않는다.
Infinite Scroll를 구현하는 방법에는 크게 세가지가 존재합니다.
- onScroll event
- Intersection Observer API
- useRef
onScroll event
onScroll event를 이용해서 사용자가 scroll을 한다면 이벤트를 발생시키고, scroll위치가 페이지의 끝에 닿았는지 판단합니다. 끝에 도달했다면 새로운 컨텐츠를 로딩하기 위한 요청을 하고 컨텐츠를 덧붙이는 방식입니다. 하지만 scroll 이벤트는 굉장히 빈번하게 발생하기 때문에 성능 최적화를 위해서 throttle과 같은 처리가 필요합니다. throttle 이란 일정 시간 내에 한번만 함수를 호출하는 기술로 정해진 시간 간격 내에 반드시 최대 한번 함수가 호출 됩니다.
Intersection Observer API
DOM Element간에 영역이 겹치는걸 감시하는 API입니다. Intersection API를 이용하면 scroll, resize 와 같은 비싼 비용의 이벤트를 좀더 쉽고 좋은 퍼포먼스로 사용할 수 있습니다. Lazy-load, infinite scroll 과 같은 것들을 구현할 때 유용하게 사용할 수 있습니다.
API에서 데이터를 fetching 하는 라이브러리로는 Axios를 활용하겠습니다.
Axios
- 서버와 클라이언트가 비동기 방식으로 데이터를 주고받기 위해 도와주는 라이브러리
- axios는 ajax 호출을 하도록 도와줍니다.
- ajax란 XMLHttpRequest를 이용해 JavaScript에서 비동기 통신으로 서버와 클라이언트간 XML 데이터를 주고 받을 수 있게 해주는 기술입니다.
- XMLHttpRequest란 브라우저와 서버간 데이터를 전송할 수 있게 하는 Web API입니다.
참고