React 표 컴포넌트, 윈도잉으로 30만 건 데이터도 쌩쌩!
by DD
10개월 전
조회수 3
윈도잉 기법을 활용하여 React 기반 표 컴포넌트의 렌더링 성능을 개선함
자체 개발한 Big Table 컴포넌트를 통해 30만 건의 로그 데이터 렌더링 성공
React-window의 한계를 극복하고, CSS 스타일 적용 및 유연한 UI 구현
윈도잉 기법의 핵심 원리
윈도잉은 대용량 데이터를 효율적으로 처리하기 위한 핵심 기술이다. React 환경에서 가상화(Virtualization)를 통해 화면에 보이는 요소만 렌더링한다. 따라서 DOM 요소 감소를 통해 초기 렌더링 속도 향상 및 메모리 사용량 감소를 달성한다.
Big Table 컴포넌트 아키텍처
Big Table은 윈도잉 기법을 기반으로 자체 개발된 고성능 표 컴포넌트이다. Overscan을 통해 깜빡임 문제를 해결하고, 무한 스크롤을 구현하여 대용량 데이터 렌더링을 지원한다. ResizeObserver를 활용하여 동적 높이 변화에 대응한다.
성능 개선을 위한 전략
Big Table은 key 값을 활용하여 불필요한 재렌더링을 방지한다. 렌더링 대상 범위 계산을 통해 필요한 데이터만 렌더링한다. OOM(Out of Memory) 문제를 해결하기 위해 IndexDB 캐싱 또는 페이징 기법을 고려한다. 따라서 30만 건 데이터를 안정적으로 처리한다.
