VariableSizeList: 동적 행 높이

행의 높이가 일정하지 않은 경우가 있습니다. 채팅 목록에 짧은 메시지와 긴 메시지가 섞여 있거나, 피드에 콘텐츠 양이 서로 다른 카드가 있을 수 있습니다. FixedSizeList는 하나의 일정한 itemSize를 가정하므로 이런 경우를 처리할 수 없습니다.

이런 경우 react-window에서는 각 항목이 자체 크기를 지정할 수 있는 목록 유형을 제공합니다.

VariableSizeList는 항목별 크기를 받는다는 점을 제외하면 FixedSizeList와 같은 방식으로 작동합니다. 대신 VariableSizeList를 가져오고 주어진 index의 크기를 반환하는 함수를 제공하면 됩니다.

나머지 요소인 children 렌더링 함수와 핵심 style 속성은 그대로이므로 변경 작업이 작습니다.

VariableSizeList에서 itemSize는 index를 받아 해당 행의 픽셀 단위 높이를 반환하는 함수입니다. react-window는 이 함수를 호출해 오프셋을 계산하고 표시 영역을 결정합니다.

이를 통해 알려진 높이를 표현할 수 있습니다. 예를 들어 이미지가 있는 항목에는 더 높은 행을, 일반 텍스트에는 더 낮은 행을 지정할 수 있습니다.

각 행의 높이를 미리 알고 있다면 itemSize 함수에서 그 값을 직접 반환할 수 있습니다. 높이가 렌더링된 콘텐츠에 따라 달라진다면 행이 그려진 후 측정해야 합니다.

사전 계산된 높이는 가장 단순하고 빠르며, 측정한 높이는 더 유연하지만 크기를 목록에 다시 전달하려면 추가 작업이 필요합니다.

VariableSizeList는 성능을 위해 항목 오프셋을 캐시합니다. 측정한 높이가 변경되면 목록의 ref에서 resetAfterIndex 메서드를 호출하여 해당 인덱스부터 이후 위치를 다시 계산해야 합니다.

이를 잊으면 오래된 오프셋이 남아 행의 위치가 어긋나므로, resetAfterIndex는 동적 측정을 작동시키는 핵심입니다.

닭이 먼저냐 달걀이 먼저냐와 같은 문제가 있습니다. 행을 렌더링하려면 높이가 필요하지만 실제 높이는 렌더링한 후에야 알 수 있습니다. 목록은 행을 측정하기 전에 먼저 배치해야 합니다.

이를 해결하려면 먼저 추정값으로 렌더링한 다음 실제 높이를 알게 되었을 때 수정해야 합니다.

일반적인 패턴은 추정 높이로 행을 렌더링하고, ref 또는 ResizeObserver를 사용해 렌더링 후 실제 높이를 측정하고, 측정값을 저장한 다음 resetAfterIndex를 호출해 위치를 업데이트하는 것입니다.

이 반복 과정은 빠르게 수렴하므로 첫 번째 측정 단계가 끝나면 목록이 올바른 오프셋으로 안정됩니다.

itemSize 함수는 렌더링 간에 안정적이어야 하며, 일반적으로 useCallback으로 감싸 목록이 캐시한 오프셋을 계속 무효화하지 않도록 합니다.

인라인으로 정의한 불안정한 함수는 불필요한 재계산을 일으켜 가상화가 제공하려는 성능을 떨어뜨릴 수 있습니다.

VariableSizeList는 일정한 오프셋을 가정할 수 없고 각 항목의 크기를 추적해야 하므로 FixedSizeList보다 더 많은 작업을 수행합니다. 높이를 측정하는 경우에는 추가 측정에도 비용이 발생합니다.

행의 높이가 실제로 서로 다른 목록에서는 이 비용을 감수할 만하지만, 행의 높이가 일정하다면 FixedSizeList가 여전히 더 빠르고 간단한 선택입니다.

정확한 동적 측정에 비용이 너무 많이 든다면 때로는 근사할 수 있습니다. 행을 몇 가지 고정 높이 분류로 나누거나 적절한 평균값을 사용하면 FixedSizeList를 계속 사용할 수 있습니다.

이 방법은 픽셀 단위로 완벽한 배치를 단순성과 속도와 맞바꾸는 방식이며, 오프셋의 작은 부정확성을 허용할 수 있을 때 적절한 절충안입니다.

VariableSizeList가 각 행의 높이를 어떻게 알아내는지 떠올려 보세요.

VariableSizeList는 itemSize에 인덱스를 받는 함수를 전달하여 높이가 서로 다른 행을 처리합니다. 높이는 미리 계산하거나 측정할 수 있으며, 측정한 높이를 사용하려면 resetAfterIndex와 함께 추정-렌더링-측정-업데이트 순환이 필요합니다.

useCallback을 사용하여 itemSize 함수를 안정적으로 유지하세요. FixedSizeList보다 비용이 많이 들므로 행의 높이가 일정하거나 근사로 충분한 경우에는 고정 크기 변형을 우선 사용하세요.