Dandy Now!
  • [ 언어·프레임워크/React.js ]
    [React.js] React에서 대용량 데이터 효율적으로 렌더링하기: useVirtualizer
    2025-02-04 14:37:34
    1. 대규모 데이터 렌더링의 도전 과제현재 진행 중인 프로젝트에서 약 5000개의 객체를 가지고 있는 배열을 다루게 되었다. 이 배열 데이터를 테이블로 렌더링하였는데 역시나 성능 이슈가 발생했다. 이번 케이스와 같이 웹 애플리케이션에서 수천 또는 수만 개의 데이터 항목을 한 번에 렌더링하면-스크롤-성능이 크게 저하된다. 모든 항목을 DOM에 동시에 렌더링하면 브라우저 메모리 사용량이 급증하기 때문이다.2. 가상화(Virtualization)란?이 이슈를 해결하기 위해 가상화 기술을 적용하였다. 가상화는 현재 뷰포트에 보이는 항목만 실제로 렌더링하고, 스크롤에 따라 동적으로 항목을 로드하는 기술이다. 이를 통해 대용량 데이터를 매우 효율적으로 처리할 수 있다.3. @tanstack/react-virtual..