Parcel에서 인피니트 스크롤을 구현하는 방법은 다음과 같습니다.

1. 관련 패키지 설치하기
   • npm install react-infinite-scroll-component
2. React 컴포넌트 작성하기

   import React, { useState } from 'react';
   import InfiniteScroll from 'react-infinite-scroll-component';
   
   const InfiniteScrollComponent = () => {
     const [items, setItems] = useState([]);
   
     // 초기 데이터 로딩
     useEffect(() => {
       // 초기 데이터를 불러오는 API 호출
       fetchInitialData();
     }, []);
   
     // 더보기 버튼 클릭시 데이터 로딩
     const fetchMoreData = () => {
       // 추가 데이터를 불러오는 API 호출
       fetchNextData();
     };
   
     return (
       <InfiniteScroll
         dataLength={items.length}
         next={fetchMoreData}
         hasMore={true}
         loader={<h4>Loading...</h4>}
       >
         {items.map((item, index) => (
           <div key={index}>{item}</div>
         ))}
       </InfiniteScroll>
     );
   };
   
   export default InfiniteScrollComponent;
   

3. 스타일 설정하기 InfiniteScroll 컴포넌트의 스타일을 사용자 정의하려면 CSS 파일에 다음과 같은 스타일을 추가해야 합니다.

   .infinite-scroll-component {
     overflow: scroll;
     height: 400px;
   }
   
   .infinite-scroll-component > * {
     margin: 10px;
   }
   

4. 사용하기 위에서 작성한 InfiniteScrollComponent를 다른 컴포넌트에서 사용하면 됩니다.

   import React from 'react';
   import InfiniteScrollComponent from './InfiniteScrollComponent';
   
   const App = () => {
     return (
       <div>
         <h1>인피니트 스크롤 예제</h1>
         <InfiniteScrollComponent />
       </div>
     );
   };
   
   export default App;
   

5. 결과 확인하기 위의 코드를 실행하면 초기 데이터가 로딩되고 스크롤을 내리면 추가 데이터가 동적으로 불러와지는 것을 확인할 수 있습니다.

참고 문서:

• react-infinite-scroll-component