무한스크롤 (Infinite Scroll)
페이지네이션(Pagination)의 다른 방법으로 유튜브 또는 페이스북, 인스타그램과 같이 아래로 스크롤할 때, 계속해서 추가되는 방식의 페이지 처리 방법이다.
라이브러리를 통해서 사용방법을 알아보자.
- yarn add react-infinite-scroll
- 타입스크립트를 사용하기 때문에 타입스크립트 오류를 잡기 위해 yarn add -D @types/react-infinite-scroller를 입력한다.
- import InfiniteScroll from 'react-infinite-scroller';
<InfiniteScroll
pageStart={0}
loadMore={loadFunc}
hasMore={true || false}
loader={Loading ...}{items}</InfiniteScroll
'items' 괄호 안에 보여주고자 하는 코드들을 넣으면 무한스크롤을 통해 화면에 표현할 수 있다.
윈도우 스크롤을 사용하지 않고 해당 박스 안에서 스크롤을 사용하고자 한다면 박스 태그의 높이를 고정해주고, overflow: "auto";로 설정해준다.
InfiniteScroll에 useWindow={false} 를 주면 해당 박스 안에 스크롤이 생성된다.
개발자가 꿈이에오