LottieFiles 클러스터7분 읽기·ExodeUI 팀
React에서 Lottie 최적화: 번들 크기 및 CPU 소비 감소
React 앱에서 Lottie 애니메이션을 최적화하고, JavaScript 번들 영향을 줄이고, 정적 JSON를 대화형 ExodeUI 상태 시스템으로 마이그레이션하는 방법을 알아보세요.
핵심 요약과 정의
핵심 포인트
lottie-web 또는 lottie-react를 사용하여 React에서 Lottie를 실행한다는 것은 애니메이션 JSON를 구문 분석하고 프레임별로 렌더링하는 플레이어를 로드하는 것을 의미합니다. 작은 장식 애니메이션의 경우 일반 CSS가 더 가벼운 경우가 많습니다. 대화형 런타임의 경우 ExodeUI 또는 Rive와 같은 상태 기반 런타임이 더 적합할 수 있습니다. 변경 전후에 번들 크기와 CPU를 측정합니다.
Lottie의 핵심 웹 바이탈 영향
Lottie 애니메이션은 초기 페이지 로드 중에 실행될 때 TBT(총 차단 시간) 및 LCP(최대 콘텐츠 포함 페인트) 회귀를 자주 트리거합니다. Lottie는 JavaScript의 모든 프레임에서 매트릭스 변환을 평가하기 때문에 저전력 모바일 장치는 상당한 배터리 소모와 프레임 저하를 겪습니다.
프로덕션 구현 예시
인터랙티브 컴포넌트 구현
// A small decorative "like" pop in plain CSS instead of a Lottie file.
// No player needed; measure your own bundle and CPU before and after.
export function LikeHeart({ active }) {
return (
<svg className={active ? 'heart heart--active' : 'heart'} viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 21s-7-4.4-9.3-8.6C1 9.2 3 5.5 6.6 5.5c2 0 3.4 1.1 4.4 2.5 1-1.4 2.4-2.5 4.4-2.5 3.6 0 5.6 3.7 3.9 6.9C19 16.6 12 21 12 21z" />
</svg>
);
}
/* CSS
.heart { fill: #ccc; transition: fill 150ms; }
.heart--active { fill: #ff4a1c; animation: pop 320ms cubic-bezier(.2,1.6,.4,1); }
@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .heart--active { animation: none; } }
*/