React에서 웹워커를 활용한 대규모 데이터 테이블 성능 개선

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• *React 개발자** (중간 수준)

- 대규모 데이터 테이블 구현 시 UI 랙 문제를 해결하는 방법

- 웹워커와 비동기 처리 기술을 활용한 성능 최적화

핵심 요약

• Web Worker를 통해 필터 로직을 메인 스레드에서 분리하여 UI 랙 방지
• 하위 데이터 구조를 평탄화(flatten)한 후 웹워커로 전달하여 처리
• 비동기 처리와 오류 처리 로직(onmessage, onerror)을 통해 안정적인 사용자 경험 제공

섹션별 세부 요약

1. 문제 상황

• 컴포넌트에서 중첩 행, 서버 측 페이징, 커스텀 필터 기능 제공
• 데이터 행 수 증가 시 필터 로직이 메인 스레드에서 실행되며 UI 랙 발생
• columnFilters, customFilters 등 복잡한 로직으로 인한 렌더링 블로킹

2. 웹워커 기반 필터 처리 파이프라인

• 데이터 시리얼라이즈 (하위 행 포함) → 웹워커로 전송
• 웹워커 내에서 deep filtering, 날짜 처리, 커스텀 필터 실행
• 결과 반환 후 UI 업데이트 및 로딩 상태 표시

3. 웹워커 동적 생성

• Blob 객체를 사용하여 웹워커 스크립트 생성
• URL.createObjectURL(blob)으로 웹워커 URL 생성
• importScripts로 필터 로직 로드 및 postMessage로 결과 전송

4. 비동기 필터 처리 유틸리티

• asyncFilterDataWithColumnAndCustomFilters 함수에서 Worker 인스턴스 생성
• convertedData 구조를 웹워커로 전달하여 필터 실행
• onmessage 및 onerror 이벤트 핸들러로 결과 처리 및 오류 관리

5. 테이블 필터 훅 확장

• useFilterDataWithColumnAndCustomFilters 훅에서 useEffect로 비동기 호출
• filteredData 상태 업데이트 및 setIsSearching 상태 관리

6. 로딩 상태 구현

• 에서 로딩 상태 표시
• isSearching 상태를 통해 실시간 필터 피드백 제공

7. 기능 및 성능 개선 효과

• BOOLEAN, DATE, DATETIME, NUMBER 타입 지원
• 인터벌 필터, null 체크, 멀티선택 피커 등 다양한 필터 옵션
• UI 동결 없음, 대규모 데이터 처리 성능 향상, 모듈화된 코드 구조

결론

• Web Worker를 활용한 필터 분리는 대규모 테이블 성능 개선에 효과적
• 데이터 구조 정규화 및 비동기 오류 처리 로직 필수
• React와의 통합은 예상보다 간단하며, UI/UX 향상과 프레임 레이트 유지 가능