FixedSizeList: 수천 개 항목 렌더링

패키지 관리자를 사용해 프로젝트에 react-window를 추가할 수 있습니다. 예를 들어 react-window 패키지를 설치하면 됩니다. 규모가 작고 무거운 의존성이 없습니다.

설치한 후 필요한 목록 구성 요소를 가져오며, 가장 흔히 모든 행의 높이가 같은 경우 FixedSizeList를 가져옵니다.

FixedSizeList가 작동하려면 여러 속성이 필요합니다. height와 width는 스크롤 컨테이너를 정의하고, itemCount는 항목 수이며, itemSize는 각 행의 픽셀 단위 높이입니다.

children 속성은 하나의 행을 그리는 렌더링 함수입니다. 이를 통해 구성 요소는 올바르게 윈도잉하는 데 필요한 구조를 파악합니다.

children 렌더링 함수는 index와 style이 포함된 객체를 받습니다. index는 렌더링할 항목을 나타내므로 올바른 데이터를 찾을 수 있고, style은 가상 목록에서 행의 위치를 지정합니다.

해당 행 하나를 위한 JSX를 반환하면 react-window가 현재 표시 영역에 있는 행에 대해서만 이 함수를 호출합니다.

style 속성은 필수이며 행 요소에 적용해야 합니다. react-window는 모든 행을 절대 위치로 배치하고 top을 사용해 높이가 큰 스크롤 컨테이너 내부의 올바른 오프셋에 행을 놓습니다.

style을 적용하지 않으면 모든 행이 같은 위치에 겹쳐 쌓여 가상화가 시각적으로 무너집니다.

react-window에서 가장 흔한 실수는 행에 style 속성을 빠뜨리는 것입니다. 행이 위쪽에서 겹쳐 보이고 스크롤도 잘못 동작하여 목록이 망가진 것처럼 보입니다.

위치가 올바르게 지정되도록 제공된 style을 항상 행의 가장 바깥 요소에 펼쳐 적용하거나 할당하십시오.

렌더링 함수 내부에서 배열을 클로저로 캡처하는 대신 itemData 속성을 통해 전달할 수 있습니다. 그러면 react-window가 index와 style과 함께 이를 data 필드로 행에 전달합니다.

이렇게 하면 행 구성 요소가 분리된 상태를 유지할 수 있고, 행이 데이터를 명시적으로 받으므로 메모이제이션에도 도움이 됩니다.

FixedSizeList는 layout 속성을 horizontal로 설정하거나 버전에 따라 direction 옵션을 사용하여 가로 목록을 지원합니다. 이때 itemSize는 높이가 아니라 너비를 나타냅니다.

항목이 많은 가로 스크롤 캐러셀이나 타임라인에 유용합니다.

overscanCount 속성은 표시 영역 바로 바깥에 몇 개의 행을 추가로 렌더링합니다. 이 버퍼를 사용하면 빠르게 스크롤할 때 새 행이 마운트되기 전에 빈 공간이 보일 가능성을 줄일 수 있습니다.

작은 오버스캔은 사용 경험을 부드럽게 하지만, 너무 크면 화면 밖의 행을 지나치게 많이 마운트하여 가상화의 이점을 낭비합니다.

FixedSizeList에는 픽셀 단위의 명시적인 크기가 필요하므로 반응형 레이아웃에서는 다루기 어렵습니다. 함께 사용하는 AutoSizer 구성 요소는 부모 요소를 측정하고 렌더링 속성을 통해 목록에 width와 height를 제공합니다.

목록을 AutoSizer로 감싸면 크기를 하드코딩하지 않고도 유연한 컨테이너를 가득 채울 수 있으며, 레이아웃이 바뀔 때 이에 맞춰 조정됩니다.

작동하는 FixedSizeList는 height, width, itemCount, itemSize를 설정하고 style 속성을 적용하는 children 함수로 행을 렌더링합니다. 선택적으로 AutoSizer가 크기를 제공하고 overscanCount가 버퍼를 추가하도록 할 수도 있습니다.

이렇게 구성하면 목록의 길이와 관계없이 스크롤하는 동안 화면에 보이는 행만 마운트된 상태로 유지하면서 부드러운 스크롤을 구현할 수 있습니다.

행을 올바르게 렌더링하려면 FixedSizeList에 무엇을 알려 주어야 하는지 떠올려 보십시오.

FixedSizeList는 height, width, itemCount, itemSize와 index 및 style을 받는 children 렌더링 함수를 사용해 높이가 같은 행을 렌더링합니다. style 속성은 반드시 적용해야 하며, 그렇지 않으면 행이 겹칩니다.

itemData로 데이터를 전달하고 가로 레이아웃을 지원하며 작은 overscanCount 버퍼를 추가하십시오. 또한 AutoSizer를 사용하면 크기를 하드코딩하지 않고 반응형 컨테이너를 가득 채울 수 있습니다.