React의 무한 로딩 목록 구성 요소

사진: Jaël Vallée on Unsplash

안녕 👋,

지난 주에 나는 에 관한 기사를 썼다. 이 특별한 경우에 대한 추상화를 작성하는 것이 가능하다는 것을 알아냈습니다.

소개합니다react-simple-infinite-loading . 사용자가 목록을 아래로 스크롤할 때 로드되는 목록 요소를 표시합니다.



다음은 코드의 예입니다. GraphQL 서버를 사용하는 나의 repository에서 보다 구체적인 예를 찾을 수 있습니다.

import React from 'react'

import InfiniteLoadingList from 'react-simple-infinite-loading'

function Example ({ items, fetchMore, hasMore }) {
  return (
    <div style={{ width: 300, height: 300 }}>
      <InfiniteLoading
        items={items}
        itemHeight={40}
        hasMoreItems={hasMore}
        loadMoreItems={fetchMore}
      >
        {({ item, style }) => (
          <div style={style}>{item}</div>
        )}
      </InfiniteLoading>
    </div>
  )
}

Brian Vaughn의 세 가지 라이브러리를 사용합니다.

react-window은 큰 목록을 효율적으로 표시하도록 만들어졌습니다. 보이는 요소와 재사용 노드에 대한 구성 요소만 생성합니다.

react-window-infinite-loader은 사용자가 목록을 아래로 스크롤할 때 적시에 요소를 로드하는 HOC입니다

.

react-virtualized-auto-sizer은 상위 컨테이너에서 사용 가능한 공간에 맞도록 목록을 표시하는 데 도움이 됩니다.

관심있으신 분들은 부담없이 도전해보세요!

저장소: https://github.com/frinyvonnick/react-simple-infinite-loading

피드백과 기여에 감사드립니다 🙏 질문이 있으시면 저에게 트윗을 보내주세요!

도움이 되길 바랍니다!