VirtualList

리스트의 가상 렌더링을 지원하는 컴포넌트입니다. 반복되는 데이터를 모두 렌더링하지 않고 보이는 만큼만 렌더링하여 데이터의 크기와 관계없이 부드러운 스크롤이 가능하게 해줍니다.

ForwardRef 컴포넌트로 리스트에 대한 컨트롤을 ref 를 통해 얻을 수 있습니다.

export function VirtualListBasic(){

  const [ data ] = useState(Array.from(Array(100000)).map((_, idx)=>({name:`idx-${idx}`})))
  
  const renderRows = (idx:number) => {
    return <Flex key={`row-${idx}`} flexAlign='center' flexHeight='40px'>{data[idx].name}</Flex>;
  }

  return <Frame>
    <Flex flexHeight="35px">data 갯수 : {data.length}</Flex>
    <Flex flexHeight="400px">
      <VirtualList
      itemRenderer={renderRows}
      length={data.length}
      />
    </Flex>
  </Frame>
}

속성 설명

(optional) itemRenderer

itemRenderer = ItemRenderer = (index: number, key: number | string) => JSX.Element

리스트의 row 렌더러를 지정합니다. 해당 함수에는 현재 렌더링해야할 data 의 index 와 임의의 key 값이 주어집니다.

(optional) length

length = number

data 의 총 길이를 설정합니다. 이 값을 기준으로 가상 렌더링 환경을 잡게 됩니다.

(optional) threshold

threshold = number

가상 스크롤시 부드러운 처리를 위해 보이는것 보다 약간 더 렌더링을 하게 되는데, 이 정도를 조정합니다.

기본값은 100입니다.