Skeleton 썸네일형 리스트형 React에서 컴포넌트 로딩 시 애니메이션 트랜지션 적용하기 사용자는 300ms만 느려도 체감 속도가 떨어집니다. 컴포넌트가 마운트/언마운트되거나 데이터가 로딩되는 순간에 적절한 애니메이션을 적용하면 지각 성능을 크게 개선할 수 있습니다. 이 글에서는 CSS 전환, React Transition Group, Framer Motion, Suspense 스켈레톤, 라우트 전환까지 실무에서 바로 쓰는 패턴을 정리합니다.1. CSS만으로 가벼운 페이드 인 트랜지션외부 라이브러리 없이 마운트 시 부드럽게 나타나는 패턴입니다. 마운트 직후 클래스 토글로 트랜지션을 시작합니다. 접근성을 위해 prefers-reduced-motion도 고려합니다.import React, { useEffect, useState } from 'react';const styles = `.fade {.. 더보기 이전 1 다음