-
react-virtuoso를 사용한 렌더링 최적화React 2024. 3. 30. 20:04728x90
React-Virtuoso란?
React-Virtuoso는 React 애플리케이션을 위한 최첨단 가상 리스트 라이브러리입니다.
가상 스크롤링을 사용하여 대규모 데이터 세트를 효율적으로 렌더링 하고, 사용자 경험을 향상하며, 애플리케이션의 성능을 최적화합니다.
React-Virtuoso는 동적 높이, 그룹화, 맨 위로 스크롤, 무한 로딩 등 고급 기능을 지원하여 개발자가 복잡한 목록 및 테이블을 쉽게 구현할 수 있게 해 줍니다.
React-Virtuoso와 React-Window 및 React-Virtualized 비교
장점
- 동적 높이 지원: React-Virtuoso는 항목의 높이가 동적으로 변할 수 있음을 자동으로 감지하고 최적화합니다. 이는 React-Window와 비교했을 때 두드러진 차이점이며, React-Virtualized와 비슷하지만 더 나은 성능을 제공합니다.
- 사용의 용이성: React-Virtuoso는 복잡한 설정 없이도 쉽게 사용할 수 있으며, 많은 고급 기능이 기본으로 제공됩니다. 반면, React-Virtualized는 더 많은 설정과 커스터마이징을 요구할 수 있습니다.
- 성능: React-Virtuoso는 최신 웹 기술을 활용하여 뛰어난 성능을 제공합니다. 대규모 데이터 세트의 렌더링 속도와 스크롤 성능이 React-Window나 React-Virtualized보다 우수할 수 있습니다.
단점
- 학습 곡선: React-Virtuoso의 다양한 기능과 설정 옵션 때문에 초기 사용자에게 다소 어려울 수 있습니다. 이는 React-Window가 제공하는 단순함과 대비됩니다.
- 번들 크기: React-Virtuoso는 추가 기능을 제공하기 때문에, React-Window에 비해 번들 크기가 크다는 단점이 있을 수 있습니다. 이는 초기 로딩 시간에 영향을 미칠 수 있습니다.
React-Virtuoso를 사용하여 간단한 가상 리스트를 구현하는 방법을 살펴보겠습니다.
import React from 'react'; import { Virtuoso } from 'react-virtuoso'; const MyList = () => { const items = Array.from({ length: 10000 }, (_, index) => `항목 ${index + 1}`); return ( <Virtuoso data={items} itemContent={(index, item) => ( <div style={{ padding: '1rem', borderBottom: '1px solid #ccc' }}> {item} </div> )} style={{ height: '400px', width: '100%' }} /> ); }; export default MyList;
이 코드는 10,000개 항목을 포함하는 가상 리스트를 생성합니다.
Virtuoso 컴포넌트는 data prop을 통해 항목 배열을 받고, 각 항목을 렌더링 하기 위한 itemContent 함수를 정의합니다.
이 예제는 간단하지만, React-Virtuoso의 기본 사용법을 잘 보여줍니다.
React-Virtuoso는 동적 높이 항목, 복잡한 데이터 구조, 고성능 스크롤링과 같은 고급 기능을 필요로 하는 프로젝트에 이상적인 라이브러리이며, 특히 동적 높이가 중요한 채팅과 같은 서비스에서는 React-Window 나 React-Virtualized 오히려 사용성이 훨씬 간편하다는 장점이 있습니다.
라이브러리를 선택할 때 주로 가장 인기 있는 라이브러리를 항상 선택해 왔는데 이번에 React-Virtuoso에 대해 알게 되며 인기 있는 라이브러리라도 불편한 점이 있다면 그 점을 보완한 라이브러리를 찾아보는 것도 좋다는 것을 알게 되었습니다.
'React' 카테고리의 다른 글
Compound Component 패턴 (feat. React, Next.js) (0) 2024.09.21 Cypress vs Playwright E2E 테스트 프레임워크 비교 (2) 2024.02.13 고급 React Hooks 사용을 위한 팁과 요령 (0) 2024.02.05 useState와 useEffect를 넘어선 고급 React Hooks (0) 2024.01.29 React useEffect vs useLayoutEffect 차이점 알아보기 (0) 2022.12.15