[React + TypeScript] 무한 스크롤 구현하기
무한 스크롤이란? 사용자가 페이지의 하단에 도달했을 때, api를 호출하여 끊임없이 컨텐츠를 로드하는 사용자 경험 구현 방식 1. target 엘리면트를 만든다. 2. IntersectionObserver를 이용하여 target 엘리먼트가 화면에 보여졌는지를 추적한다. 3. target 엘리먼트가 화면에 보여졌다면 api 호출을 하여 기존의 데이터에 받아온 데이터를 덧붙인다. 구현 내용 0. 가정 - 백에서 데이터는 10개씩 받아온다. 1. target 엘리먼트를 만든다 옵저버 인스턴스의 observe 메서드에 target 엘리먼트를 넘겨주기 위해 ref를 만든다. 만약 모든 데이터를 가져왔을 경우를 대비하여 조건부 렌더링을 적용시킨다. (page의 끝을 가져오지 않았다면 target 엘리먼트를 계속 유..
기술
2023. 1. 4. 23:48
