모바일 앱 성능 최적화

문제 설명

성능 문제가 있는 React Native 앱을 분석하고 최적화하세요.

문제 증상

• 리스트 스크롤 시 버벅임
• 화면 전환 시 1초 이상 지연
• 메모리 사용량 지속 증가
• 앱 시작 시간 5초 이상

문제가 있는 코드

// 문제 1: 불필요한 리렌더링
function ProductList({ products, onSelect }) {
  return products.map(product => (
    <ProductCard
      key={product.id}
      product={product}
      onPress={() => onSelect(product)}
      style={{ marginBottom: 10 }}
    />
  ));
}

// 문제 2: 무거운 연산
function SearchResults({ query }) {
  const filtered = allProducts.filter(p =>
    p.name.toLowerCase().includes(query.toLowerCase())
  );
  // ...
}

// 문제 3: 이미지 처리
<Image source={{ uri: imageUrl }} style={{ width: 100, height: 100 }} />

최적화 영역

1. 컴포넌트 메모이제이션
2. 리스트 가상화
3. 이미지 최적화
4. 번들 크기 최적화
5. 메모리 관리

평가 기준

• 최적화 전후 성능 비교
• Best Practice 적용
• 코드 품질