[FEAT] 무한스크롤을 이용할 수 있다.
noy3928 opened this issue · comments
페이지의 하단에 닿으면 추가적인 데이터를 로드하도록 구현해야한다.
구현내용 정리
구현사항을 미리 정리해보면 좋을 것 같다.
무한 스크롤 기능을 추가하기 위해서 필요한 내용들은 아래와 같다.
- 화면의 하단에 닿았다는 것을 감지하기
- intersectionObserver api를 이용하기(scroll 이벤트는 이벤트리소스 낭비와 성능적인 이슈가 있다)
- 화면의 하단에 닿으면 pageNumber를 업데이트하기.
- intersectionObserver에 등록해서, pageNumber를 업데이트하게 만들기
- 업데이트된 pageNumber에 알맞게 데이터를 불러오기
- useEffect의 의존성배열에 pageNumber를 구독해두었다가 pageNumber가 업데이트되면, 해당 번호로 데이터를 패치하기
- 로딩 상태만들기. 로딩상태이면 데이터패치를 중복적으로 하는 행위를 막기
- loadingDecorator 만들기. 데이터 패치 전후로 isLoading의 상태를 true와 false로 바꿔주는 decorator 함수 만들기.
- 해당 함수를 fetchBooksByType 함수를 감싸주기
추가되어야 할 기능
- intersectionObserver로 화면을 감지하고, callback을 등록할 수 있게 하는 커스텀 훅을 만들기
- loadingDecorator 만들기.
- isNextPage로 호출할 데이터가 남아있는지 확인한다. 없으면 무한스크롤이 발생해도 호출하지 않는다.
- 현재 책의 갯수과 total 책의 갯수로 판단한다.
수정되어야 할 기능
- fetchBooksByType :
- pageNumber : 어떤 페이지 번호로 호출할 것인지에 대한 pageNumber 정보를 인자로 받아와야 한다.
- setTotalBooks : 해당 키워드에 대한 전체 책의 갯수가 몇개인지 저장하는 함수를 받아온다. (res에 total의 정보가 있기 때문에 해당 total의 정보를 setTotalBooks에 넘겨준다.)
- searchAndSetBooks :
- loadingDecorator : loadingDecorator함수를 인자로 받아와서, fetchBooksByType함수를 감싸줘야한다.
- setTotalBooks : setTotalBooks 함수를 인자로 받아와서, fetchBooksByType의 파라미터에 넘겨줘야한다.
- 파이프라인 변경 : 원래 A -> B -> C 형태의 파이프라인이었다면, A -> D(B) -> C 형태의 파이프라인으로 수정될 것이다.
- resolveKeyword -> loadingDecorator(fetchBooksByType) -> setState 이렇게 수정.
- SearchForm :
- setKeyword : 입력된 키워드를 저장해두어야 한다. 저장된 키워드를 통해서 무한스크롤를 호출할 때 재사용할 수 있다. 처음 검색어를 입력하고 호출 할 때 저장한다.
- BookList :
- ref : ref를 prop로 받아온다. 해당 ref는 intersectionObserver를 위해 사용될 것이다. 가장 마지막 book에 해당 ref를 등록한다.