InfiniteScroll

말 그대로 무한 스크롤이다.

페이지를 클릭하면 다음 페이지 주소로 이동하는 pagination과 달리, 지정해준 페이지 하단에 도달하면 새로운 data가 추가로 로드되는 식이다.

설치

npm install --save react-infinite-scroll-component

사용

import React from 'react';
import InfiniteScroll from 'react-infinite-scroll-component';
import Loading from '../loading';

class SelectForm extends React.Component {
  state = {
    limit: 20, // 20개씩 받아오기
    itemInfo: [], // 화면에 뿌려줄 data
    isLoding: false, // 로딩 여부 (data가 없으면 loding 화면) 
    isMore: false // 남은 data 존재 여부
  };

// <ul id="scrollableDiv">
	<InfiniteScroll
	  // 무한 스크롤
	  dataLength={this.state.itemInfo.length}
	  isMore={this.state.isMore}
	  next={this.settingItemMore} // 스크롤시 데이터 불러오는 func
	  scrollThreshold="100px" // 뷰포트가 스크롤영역 하단에서 100px 미만일때 이벤트를 트리거
	  scrollableTarget="scrollableDiv" // 스크롤을 제공하는 부모 요소 내에서 렌더링
	>
	  {this.state.isLoding ? (
	      this.state.itemInfo.map((data, index) => {
	        return (
	          <SettingItem
	            // 유저 상품 목록
		            imageUrl={imageUrl}
		            dragupItem={data}
		            index={index}
		            key={index}
		            onSelectItem={this.onSelectItem}
		            homeAdSelect
	          />
	        );
	      })
	  ) : (
	
	    <Loading />
	  )}
	</InfiniteScroll>
 // </ul>