[React] 무한 스크롤 (Infinite Scroll) 구현하기


[React] 무한 스크롤 (Infinite Scroll) 구현하기

간단한 무한스크롤 예제를 통해 구현 방법에 대해 정리해보려 한다. redux와 redux-toolkit을 이용하여 구현하였다. 1. 예제 설명 // ./components/List.js import React from "react"; const List = ({ nick, content }) => { return ( <> <div className="List"> <div className="name">name: {nick}</div> <div className="content">content: {content}</div> </div> <br /> </> ); }; export default List; 이런 식으로 데이터가 들어가있는 리스트들이 스크롤을 내릴 때마다 10개씩 추가되어 나오는 예제라고 해보자. 데이터베이스에 이런 데이터들이 저장되어있고, 이 데이터들을 10개씩 받아와 리스트들을 만들어 준다고 해보자. 백엔드는 express로 짰으며, API 코드는 아래와 같다. (단순히...


#infinitescroll구현 #nextjsinfinitescroll #reactinfinitescroll #react무한스크롤 #reduxtoolkit무한스크롤 #redux무한스크롤 #무한스크롤 #무한스크롤구현

원문링크 : [React] 무한 스크롤 (Infinite Scroll) 구현하기