- 무한 스크롤을 구현하는 방법은 라이브러리를 사용하거나 React Core의 기본 기능을 사용하는 두 가지 방법이 있습니다. 🥨
- 무한 스크롤 구현의 핵심은 API를 반복적으로 호출하고 사용자가 화면 하단에 도달하면 데이터를 새로 불러오는 것입니다. 🔁
- API 호출은
use state를 활용하여 데이터를 저장하고,page상태 변수를 통해 현재 페이지를 관리할 수 있습니다. 📑 loading상태 변수를 사용하여 API 호출 중 화면에 로딩 이벤트를 표시하고,hasNextPage상태 변수를 통해 더 이상 데이터가 존재하지 않는 경우 호출을 중단할 수 있습니다. ⏳- 데이터의 중복을 방지하기 위해
pageHistoryaray를 사용하여 이미 호출된 페이지를 기록하여 재호출을 방지합니다. 🚫 - API 호출은
try-catch문을 사용하여 오류 처리를 수행하고, 응답값을 활용하여 데이터를 업데이트합니다. 👍
Recommanded Videos
