intersection observer

무한스크롤 컴포넌트 구현하기 -1-

* 본 글은 2022.06.21에 작성한 글을 업데이트한 글입니다. 목록을 표시하는 방법에는 여러가지 방법이 있습니다만 모바일 환경에서 주로 구현되는 방법은 무한 스크롤입니다. 오늘은 이 무한스크롤을 구현하고 독립적인 컴포넌트 형태로 꺼내 쓸 수 있도록 만들어보려합니다. - 무한스크롤 구현 무한 스크롤을 만들 때 생각해야할 부분은 다음과 같습니다. 1. 사용자가 목록의 끝에 도달했다는 것을 어떻게 인지할 것인가? 2. 목록의 갱신은 어떻게 할 것 인가? 2번의 경우 우리는 자바스크립트의 비구조화 할당(... 문법)과 State를 통하여 쉽게 갱신할 수 있습니다. 갱신된 목록 역시 map 함수를 통하여 손쉽게 렌더링 할 수 있습니다. 그렇다면 문제가 되는 부분은 바로 1번, 사용자가 목록의 끝에 도달했다는..