고급 성능 최적화

개념 설명

React 애플리케이션의 렌더링 성능을 극대화하기 위한 고급 기법들로, 가상화, 코드 분할, 지연 로딩 등을 통해 사용자 경험을 향상시키는 전략.

핵심 포인트

• 가상화(Virtualization): 대용량 리스트에서 보이는 영역만 렌더링하여 메모리 사용량 최적화
• React Window/Virtualized: 가상 스크롤 라이브러리로 성능 문제 해결
• Code Splitting: 라우트/컴포넌트 단위로 번들을 분할하여 초기 로딩 시간 단축
• Lazy Loading: 필요한 시점에 컴포넌트를 동적으로 로드하여 번들 크기 감소
• Prefetching: 사용자 행동 예측을 통한 미리 로딩으로 체감 성능 향상
• Bundle Analysis: 웹팩 번들 분석을 통한 최적화 포인트 발견

예시 코드

// 1. React Window를 활용한 가상 스크롤
import { FixedSizeList } from 'react-window';