프론트엔드 어려움 코딩

Virtual List 구현

대용량 리스트를 위한 가상화 컴포넌트를 구현하세요

45분

150점

120개 테스트케이스

#3664

문제 설명

10,000개 이상의 아이템을 효율적으로 렌더링하는 Virtual List를 구현하세요.

가상화 원리

화면에 보이는 아이템만 실제 DOM에 렌더링
스크롤 위치에 따라 렌더링할 아이템 계산
버퍼 영역 추가로 스크롤 시 빈 공간 방지

요구사항

고정 높이 아이템 지원
부드러운 스크롤
스크롤바 크기 정확히 표현
키보드 네비게이션

Props

<VirtualList
  items={items}
  itemHeight={50}
  containerHeight={400}
  renderItem={(item, index) => ...}
/>

예제 테스트케이스

예제 1

입력

31
932 36 931 913 0 750 787 331 -853 880 752 32 -804 -935 42 600 -138 343 346 -264 -847 -165 -579 506 -709 -298 -664 388 -463 -212 -873

출력

예제 2

입력

65
855 830 67 507 528 139 -831 -358 -124 393 -682 339 914 -699 794 706 -237 98 627 799 639 -175 -732 758 377 -532 -560 -968 -688 70 -481 316 115 -262 435 18 -654 -302 -502 -121 -165 305 -31 708 127 326 519 -301 -447 118 -504 941 -515 -878 -536 834 937 -572 377 -628 883 370 -312 248 796

출력

예제 3

입력

41
355 357 570 745 -346 -39 734 -507 -925 -864 -527 -565 678 483 -232 -383 -698 -874 394 -28 823 -750 14 356 -651 -115 -136 172 -958 882 17 782 788 230 -952 452 286 84 -335 -415 260

출력

-838

힌트

실행 버튼을 눌러 코드를 실행하세요.