[React] InfiniteScroll 사용법

---

1.InfiniteScroll 라이브러리 설치

npm 으로 react-infinite-scroll-component를 설치한다.

npm install react-infinite-scroll-component

 

 

 

2.사용법

 

• dataLength: 현재 렌더링된 데이터의 길이
• next: 데이터를 더 로드하는 함수
• hasMore: 더 로드할 데이터가 남아 있는지 여부
• loader: 데이터 로딩 중 보여줄 컴포넌트
• endMessage: 더 이상 데이터가 없을 때 보여줄 메시지

 

<InfiniteScroll
      dataLength={items.length} // 현재 렌더링된 데이터 길이
      next={fetchMoreData} // 추가 데이터를 불러오는 함수
      hasMore={hasMore} // 데이터가 더 남아 있는지 여부
      loader={<h4>로딩 중...</h4>} // 로딩 중 보여줄 컴포넌트
      endMessage={<p>모든 데이터를 불러왔습니다.</p>} // 데이터가 더 이상 없을 때 보여줄 메시지
    >
      {items.map((item, index) => (
        <div key={index} style={{ height: 30, border: "1px solid black", margin: 6 }}>
          아이템 {index + 1}
        </div>
      ))}
</InfiniteScroll>