React Query(v4) - 9. InfiniteScroll by react-infinite-scroller

[유데미] React Query : React로 서버 상태 관리하기

📍react-infinite-scroller

- 해당 라이브러리에서 제공하는 InfiniteScroll 컴포넌트는 useInfiniteQuery와 호환성이 좋아 자주 쓰인다

📍InfiniteScroll 컴포넌트

- 2가지 프로퍼티가 있다

 

1️⃣loadMore 프로퍼티

- 더 불러올 데이터를 연결

- loadMore={fetchNextPage} 형태로 사용

 

2️⃣hasMore 프로퍼티

- 더 불러올 데이터가 있는지 확인

- hasMore={hasNextPage} 형태로 사용

 

- data는 data.pages 배열에 객체 원소 형태로 존재

1page.. 2page 등이 또 배열이므로 map을 2번 써야  한다

      <InfiniteScroll loadMore={() => fetchNextPage()} hasMore={hasNextPage}>
        {data.pages.map((pageData) =>
          pageData.results.map(
            ({ name, hair_color, eye_color }: PersonType) => {
              return (
                <Person
                  key={name}
                  name={name}
                  hairColor={hair_color}
                  eyeColor={eye_color}
                />
              );
            }
          )
        )}
      </InfiniteScroll>

 

📍양방향 스크롤 : Bi-directional Scrolling

- 데이터 중간부터 시작할 때 유용 (시작 전, 후 데이터를 가져옴)

- next 뿐만 아니라 prev 계열 메서드 사용