bvaughn/react-window

어떤 프로젝트인가요?

핵심 기능

• 01화면에 보이는 행이나 셀만 렌더링해 대규모 데이터셋에서도 DOM 크기를 작게 유지합니다
• 02행 데이터용 List와 2차원 표 데이터용 Grid를 제공합니다
• 03고정값, 백분율, 함수 기반의 행 높이와 열 너비를 지원합니다
• 04hook을 통해 동적 행 높이를 측정할 수 있습니다
• 05scrollElement를 통해 window 또는 상위 요소에서 스크롤할 수 있습니다
• 06스크롤을 위한 imperative ref API와 TypeScript 타입을 제공합니다

활용 사례

• React 앱에서 수천 개의 항목이 있는 채팅 메시지, 로그 또는 피드를 렌더링할 때
• 웹 대시보드에서 데이터 테이블이나 스프레드시트 형태의 그리드를 만들 때
• 지연 없이 긴 드롭다운 또는 선택 옵션 목록을 표시할 때
• window와 함께 스크롤되는 페이지 안에 가상화된 목록을 삽입할 때

빠른 시작

1. 1

   NPM에서 라이브러리를 설치하세요

   npm install react-window
2. 2

   TypeScript 정의는 배포된 dist 폴더에 포함되어 있습니다. 사용 방법은 문서 사이트를 참조하세요

사용 전 알아둘 점

• !README에 따르면 행 높이를 동적으로 설정하는 방식은 미리 정해진 크기를 사용하는 방식보다 효율성이 떨어집니다.

토픽

자주 묻는 질문

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

화면에 보이는 행과 셀만 마운트해 대규모 목록과 표 데이터를 효율적으로 렌더링하는 React 컴포넌트입니다. react-window는 수천 개의 DOM 노드를 한꺼번에 렌더링할 때 발생하는 성능 저하 없이 긴 목록과 그리드를 표시할 수 있는 React 컴포넌트 라이브러리입니다. 행 기반 데이터용 List 컴포넌트와 행·열로 구성된 데이터용 Grid 컴포넌트를 제공하며, 현재 보이는 뷰포트 안의 항목과 설정 가능한 오버스캔 버퍼만 렌더링합니다.

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

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

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

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

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

React 앱에서 수천 개의 항목이 있는 채팅 메시지, 로그 또는 피드를 렌더링할 때 웹 대시보드에서 데이터 테이블이나 스프레드시트 형태의 그리드를 만들 때 지연 없이 긴 드롭다운 또는 선택 옵션 목록을 표시할 때 window와 함께 스크롤되는 페이지 안에 가상화된 목록을 삽입할 때

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

NPM에서 라이브러리를 설치하세요: npm install react-window TypeScript 정의는 배포된 dist 폴더에 포함되어 있습니다. 사용 방법은 문서 사이트를 참조하세요

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

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