가상화와 데이터 가져오기 결합

무한 스크롤은 명시적인 페이지 버튼으로 페이지를 나누는 대신 사용자가 목록의 끝에 가까워질 때 더 많은 데이터를 불러옵니다. 가상화와 결합하면 매우 큰 데이터 모음도 부드럽게 탐색할 수 있습니다.

목록에는 현재 보이는 행만 표시하고, 사용자가 맨 아래에 도달하기 직전에 새 데이터를 백그라운드에서 가져옵니다.

react-window 목록 구성 요소는 현재 렌더링된 항목의 인덱스를 알려 주는 onItemsRendered 콜백을 받습니다. 이 콜백은 화면에 표시되는 영역과 미리 렌더링하는 영역의 시작 및 종료 인덱스를 제공합니다.

이 콜백을 스크롤 처리에 연결하면 원시 스크롤 이벤트를 직접 연결하지 않고도 사용자가 목록을 얼마나 스크롤했는지 감지할 수 있습니다.

언제 데이터를 가져올지 알려면 onItemsRendered에서 받은 overscanStopIndex를 현재 itemCount와 비교하세요. 렌더링된 창이 로드된 데이터의 끝에 가까워지면 더 많은 데이터가 필요합니다.

미리 렌더링하는 영역의 종료 인덱스를 사용하면 약간의 여유 시간이 생겨 사용자가 실제로 마지막 행에 도달하기 조금 전에 가져오기를 시작할 수 있습니다.

종료 인덱스가 임계값을 넘으면, 예를 들어 itemCount에서 한 화면 분량 이내로 들어오면 다음 페이지를 가져오는 함수를 호출합니다. 여러 요청이 겹쳐서 실행되지 않도록 보호 장치를 추가하세요.

로드 중 플래그를 사용하거나 이미 가져오기가 진행 중인지 확인하면 사용자가 실행 구간을 스크롤할 때 중복 요청을 방지할 수 있습니다.

더 많은 데이터가 있는 동안 itemCount를 로드된 항목 수에 1을 더한 값으로 설정하는 간단한 방법이 있습니다. 추가된 행에는 로딩 표시기를 렌더링하여 데이터를 가져오는 중임을 알립니다.

새 데이터가 도착하면 개수가 늘어나고 로딩 표시기 행이 실제 콘텐츠로 바뀌므로, 시각적으로 부드러운 피드백을 제공할 수 있습니다.

react-window-infinite-loader 보조 패키지는 이 로직을 대신 처리해 줍니다. isItemLoaded, loadMoreItems, itemCount를 제공하면 사용자가 아직 로드되지 않은 행을 향해 스크롤할 때 로더를 호출합니다.

어떤 범위가 로드되었는지 관리하고 불필요한 로드 호출을 방지하므로, 견고한 무한 스크롤을 더 간단하게 구현할 수 있습니다.

아직 로드되지 않은 인덱스에는 빈 공간 대신 자리 표시자나 스켈레톤 행을 렌더링할 수 있습니다. 렌더링 함수는 해당 인덱스의 항목이 로드되었는지 확인하고, 로드되지 않았다면 스켈레톤을 표시합니다.

스켈레톤은 배치를 유지하고 진행 상황을 알려 주므로 다음 페이지가 도착하는 동안 빈 공간으로 두는 것보다 사용자 경험이 좋습니다.

데이터 가져오기는 실패할 수 있으므로 오류를 적절하게 처리해야 합니다. 끝에 특별한 오류 행을 표시하고, 실패한 범위에 대해 로드 함수를 다시 호출하는 재시도 버튼을 추가할 수 있습니다.

이렇게 하면 일시적인 문제가 발생한 뒤에도 목록을 계속 사용할 수 있고, 전체 페이지를 다시 로드하지 않고 복구할 방법을 사용자에게 명확하게 제공할 수 있습니다.

무한 목록에 데이터를 제공하는 페이지네이션 방식에는 두 가지가 널리 사용됩니다. 오프셋 페이지네이션은 페이지 번호나 건너뛸 개수를 기준으로 요청하고, 커서 페이지네이션은 마지막으로 확인한 항목을 가리키는 불투명한 커서 뒤의 항목을 요청합니다.

실시간으로 변하는 데이터에는 일반적으로 커서 페이지네이션이 더 안정적입니다. 항목이 삽입될 때 오프셋 방식에서 발생할 수 있는 위치 변화와 중복을 피할 수 있기 때문입니다.

React Query의 useInfiniteQuery는 가상화와 자연스럽게 함께 사용할 수 있습니다. 가져온 페이지, 다음 커서, 로딩 상태와 오류 상태를 관리하고, react-window는 평탄화된 페이지를 효율적으로 렌더링합니다.

목록에 사용할 페이지들을 하나의 배열로 평탄화한 다음 onItemsRendered의 임계값에서 fetchNextPage를 호출하면 캐시와 재시도 기능을 별도로 구현하지 않고도 사용할 수 있습니다.

가상화된 무한 목록에서 언제 더 많은 데이터를 가져와야 하는지 찾아보세요.

무한 스크롤은 사용자가 끝에 가까워질 때 페이지를 불러옵니다. onItemsRendered가 인덱스를 알려 주며, overscanStopIndex를 itemCount와 비교하면 중복 요청을 방지하면서 언제 데이터를 가져올지 알 수 있습니다.

자리 표시자 행과 오류 행을 사용하고, 관리를 간소화하려면 react-window-infinite-loader를 활용하세요. 실시간 데이터에는 커서 페이지네이션을 사용하세요. React Query의 useInfiniteQuery는 react-window 렌더링과 함께 페이지, 커서, 상태를 관리합니다.