noy3928 / BookSearchSite

책을 검색해 볼 수 있는 간단한 웹사이트

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[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를 등록한다.
  • #8 해당 pr과 함께 Close