Virtualized List 썸네일형 리스트형 React에서 Virtualized List 구현하기 스크롤 목록이 수천 개의 아이템을 그릴 때 렌더링과 페인팅 비용이 급격히 증가합니다. Virtualized List는 화면에 보이는 영역만 렌더링해 메모리 사용과 렌더링 비용을 크게 줄이는 기법입니다. 실무에서는 기본 원리를 이해한 뒤 라이브러리를 쓰는 것이 가장 빠르지만, 직접 구현해 두면 커스텀 요구사항 대응에 유리합니다.1. 핵심 아이디어원리는 간단합니다.- 스크롤 컨테이너 높이는 고정합니다.- 전체 항목 높이만큼 빈 공간을 만들고, 보이는 인덱스 구간만 실제 DOM으로 렌더링합니다.- 렌더링된 블록을 translateY로 적절한 위치에 이동합니다.- 약간의 overscan을 더 렌더링해 빠른 스크롤에도 깜박임을 줄입니다.2. 최소 구현: 고정 높이 아이템 VirtualList아이템 높이가 일정할 .. 더보기 이전 1 다음