react infinite scroll

✔개요

react infinite scroll 사용

✔설치

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

✔구현

import InfiniteScroll from 'react-infinite-scroll-component';
import './App.css';
import { useState } from 'react';

function App() {
  const [datas, setDatas] 
  	= useState(['a', 'a', 'a', 'a', 'a', 'a', 'a', 'a', 'a', 'a']);

  const addData = () => {
    setTimeout(() => {
      const putDatas = [...datas];
      for (let index = 0; index < 10; index++) {
        putDatas.push('a');
      }
      setDatas(putDatas);
    }, 500);
  };


  return (
    <div className="App">
      <InfiniteScroll 
        dataLength={datas.length} 
        next={addData} 
		hasMore={true} 
        loader={<h4>Loading...</h4>}>
        {datas.map((data, i) => (
          <div key={i} className="good">
            {data}
          </div>
        ))}
      </InfiniteScroll>
    </div>
  );
}

export default App;