VirtualItem
VirtualItem 객체는 버추얼라이저가 반환하는 단일 항목을 나타냅니다. 이 객체에는 버추얼라이저의 scrollElement 내부 좌표 공간에 항목을 렌더링하는 데 필요한 정보와 그 밖의 유용한 속성 및 함수가 포함됩니다.
export interface VirtualItem {
key: string | number | bigint
index: number
start: number
end: number
size: number
}
각 VirtualItem 객체에서 다음 속성과 메서드를 사용할 수 있습니다.
key
key: string | number | bigint
항목의 고유 키입니다. 기본값은 항목 인덱스이지만, Virtualizer의 getItemKey 옵션을 통해 설정해야 합니다.
index
index: number
항목의 인덱스입니다.
start
start: number
항목이 시작되는 픽셀 오프셋입니다. 일반적으로 top/left 같은 CSS 속성이나 translateX/translateY 같은 변환에 매핑합니다.
end
end: number
항목이 끝나는 픽셀 오프셋입니다. 대부분의 레이아웃에는 필요하지 않은 값이지만 유용할 수 있어 제공합니다.
size
size: number
항목의 크기입니다. 일반적으로 width/height 같은 CSS 속성에 매핑합니다. VirtualItem.measureElement 메서드로 항목을 측정하기 전에는 버추얼라이저의 estimateSize 옵션이 반환한 예상 크기가 됩니다. 항목을 측정한 뒤에는(측정하도록 선택한 경우) 버추얼라이저의 measureElement 옵션이 반환한 숫자가 됩니다. 이 옵션은 기본적으로 getBoundingClientRect()를 사용해 요소를 측정하도록 설정되어 있습니다.
lane
lane: number
항목의 레인 인덱스입니다. 항목은 가장 짧은 레인에 배정됩니다. 기본적으로 estimateSize가 추정한 크기를 기준으로 레인 배정을 즉시 캐시합니다. 대신 측정된 크기를 기준으로 배정하려면 laneAssignmentMode: 'measured'를 설정합니다.
일반 목록에서는 항상 0으로 설정되지만, 메이슨리 레이아웃에서는 유용합니다(자세한 내용은 가변 크기 예제를 참조합니다).