bvaughn/react-virtualized

어떤 프로젝트인가요?

핵심 기능

• 01화면에 보이는 셀만 렌더링하는 가상화 List, Grid, Table, Masonry 컴포넌트.
• 02동적으로 크기가 달라지는 셀을 측정하는 CellMeasurer.
• 03사용자가 스크롤할 때 데이터를 불러오는 InfiniteLoader.
• 04여러 스크롤 영역의 위치를 동기화하는 ScrollSync.
• 05scrollElement prop을 통한 창 스크롤 지원.
• 06TypeScript 타입을 포함한 트리 셰이킹 가능한 ES 및 CommonJS 빌드.

활용 사례

• React 관리 대시보드에서 수천 개의 행이 있는 표 렌더링하기.
• 고정된 헤더와 열이 있는 스프레드시트 형태의 그리드 만들기.
• 페이지 단위로 데이터를 불러오는 무한 스크롤 피드나 목록 만들기.
• 채팅 메시지나 로그처럼 항목마다 높이가 다른 긴 목록 표시하기.

빠른 시작

1. 1

   npm으로 react-virtualized를 설치하세요

   npm install react-virtualized --save

사용 전 알아둘 점

• !README에서는 새 프로젝트에 더 가벼운 대안으로 react-window를 권장합니다.
• !Peer dependencies인 react와 react-dom을 프로젝트에 설치해야 합니다.

토픽

자주 묻는 질문

react-virtualized은(는) 무엇인가요?

화면에 보이는 행과 셀만 렌더링해 대용량 목록과 표 데이터를 효율적으로 표시하는 React 컴포넌트 모음입니다. react-virtualized는 모든 항목을 한 번에 렌더링하지 않고 대용량 목록, 그리드, 표를 표시할 수 있는 React 컴포넌트 모음입니다. List, Grid, Table, Masonry 같은 컴포넌트는 현재 뷰포트에 있는 셀만 마운트하므로 데이터셋이 커도 빠르게 렌더링할 수 있습니다.

react-virtualized은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

react-virtualized은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

react-virtualized은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. react-virtualized의 마지막 커밋은 2026년 10월 19일입니다.

react-virtualized은(는) 어디에 사용할 수 있나요?

React 관리 대시보드에서 수천 개의 행이 있는 표 렌더링하기. 고정된 헤더와 열이 있는 스프레드시트 형태의 그리드 만들기. 페이지 단위로 데이터를 불러오는 무한 스크롤 피드나 목록 만들기. 채팅 메시지나 로그처럼 항목마다 높이가 다른 긴 목록 표시하기.

react-virtualized는 어떻게 설치하나요?

npm으로 react-virtualized를 설치하세요: npm install react-virtualized --save

react-virtualized은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/bvaughn/react-virtualized