윈도잉(windowing) 기법을 적용한 고성능 표 컴포넌트 개발기
프론트엔드
윈도잉(windowing) 기법을 적용한 고성능 표 컴포넌트 개발기
두줄요약
윈도잉 기법을 React 표/목록 가상화에 적용하는 방법과 대표 라이브러리의 차이를 정리했습니다. 사내 로그 뷰 성능 개선을 위한 Big Table 개발 사례로 연결했습니다.
핵심 내용
- 윈도잉(windowing) 기법을 React의 대규모 목록 가상화에 적용해, 화면에 보이는 범위만 렌더링하는 방식으로 성능을 높이는 개념 정리
- react-virtualized, react-window, @tanstack/react-virtual의 특징과 차이를 비교하고, 간단한 UI와 커스텀 UI에 맞는 선택 기준 제시
- 사내 로그 뷰 성능 개선을 위해 자체 고성능 표 컴포넌트 Big Table 개발 사례로 이어짐