React Performance Patterns

React 코드 작성 시 성능 최적화 핵심 패턴.

우선순위별 핵심 규칙

🔴 CRITICAL: 워터폴 제거

// ❌ 순차 await — 각 요청이 이전을 기다림
const user = await getUser();
const posts = await getPosts();

// ✅ 병렬 — 독립 요청은 Promise.all
const [user, posts] = await Promise.all([getUser(), getPosts()]);

• await를 실제 사용 브랜치로 이동 (불필요한 대기 제거)
• Suspense 경계로 콘텐츠 스트리밍

🔴 CRITICAL: 번들 크기

// ❌ barrel import — 전체 모듈 로드
import { Button } from '@/components';

// ✅ 직접 import
import { Button } from '@/components/ui/Button';

• next/dynamic으로 무거운 컴포넌트 지연 로드
• 분석/로깅은 hydration 후 로드
• hover/focus 시 preload로 체감 속도 향상

🟡 HIGH: 서버사이드

• React.cache()로 요청 내 중복 제거
• 클라이언트로 전달하는 데이터 최소화
• 컴포넌트 구조 변경으로 fetch 병렬화

🟢 MEDIUM: 리렌더 방지

// ❌ 콜백에서만 쓰는 state를 구독
const [items, setItems] = useState([]);
const handleClick = () => process(items);

// ✅ ref로 전환 (리렌더 방지)
const itemsRef = useRef([]);
const handleClick = () => process(itemsRef.current);

• 비용 높은 작업은 memo 컴포넌트로 분리
• useState 초기값에 함수 전달 (lazy init)
• startTransition으로 긴급하지 않은 업데이트 분리
• 파생 state는 effect 대신 렌더 중 계산

🔵 LOW: JS 성능

• 반복 조회 → Map/Set 사용 (O(1))
• filter().map() → 하나의 루프로 결합
• RegExp는 루프 밖에서 생성
• array.length 먼저 체크 후 비싼 비교

Remotion에서의 React

Remotion 비디오 컴포넌트도 React이므로 동일 원칙 적용:

• interpolate()는 매 프레임 호출 → 비싸면 캐싱
• 무거운 계산은 useMemo / useCallback
• 오프스크린 요소 렌더링 최소화