⚡ 62. React Native 앱 퍼포먼스 최적화 전략 총정리

---

모바일 앱은 웹보다 성능에 민감하다.
프레임 드랍, 느린 로딩, 메모리 누수 하나만 있어도 사용자 이탈로 직결된다.
그래서 이번 글에서는 React Native 앱에서 퍼포먼스를 향상시키기 위해
내가 공부한 전략들을 정리해본다.

---

🧱 1. 불필요한 리렌더링 방지

✅ memo, useMemo, useCallback 적극 활용

• 동일한 props일 때 컴포넌트를 재사용할 수 있도록 React.memo 사용
• 무거운 계산은 useMemo로 메모이제이션
• 이벤트 함수는 useCallback으로 메모이제이션

const MemoizedComponent = React.memo(({ data }) => {
  ...
});

---

🪄 2. FlatList 최적화

ScrollView 대신 FlatList를 사용하고,
다음 속성들을 통해 성능을 개선할 수 있다:

<FlatList
  data={...}
  renderItem={...}
  initialNumToRender={10}
  maxToRenderPerBatch={5}
  windowSize={10}
  removeClippedSubviews={true}
/>

• initialNumToRender: 초기에 렌더링할 아이템 수
• removeClippedSubviews: 보이지 않는 아이템을 메모리에서 제거

---

🚫 3. JS-Bridge 최소화

React Native는 JS <-> Native 간 통신 비용이 크다.
즉, 잦은 setState나 console.log는 성능 저하 요인.

💡 전략:

• 애니메이션은 JS가 아닌 Reanimated 2로 네이티브처럼 처리
• console.log는 프로덕션 빌드에서 반드시 제거
• 큰 객체는 최소한의 형태로 넘기기

---

🌈 4. 이미지 최적화

• react-native-fast-image를 사용하면 이미지 캐싱이 효율적
• resizeMode, image size 최적화는 필수
• SVG는 react-native-svg를 사용해 경량화

<FastImage
  source={{ uri: 'https://image.url' }}
  resizeMode={FastImage.resizeMode.cover}
/>

---

⏱ 5. Lazy Loading 전략

• 무거운 모듈/컴포넌트는 React.lazy() 또는 dynamic import()로 분리
• react-native-screens와 Suspense로 스크린별 초기 로딩 최적화

---

🧠 6. 앱 빌드 최적화

• 릴리즈 빌드에서는 Hermes 사용 권장 (안드로이드)
• 코드 난독화, Proguard 설정, 이미지 압축

# android/app/build.gradle
enableHermes: true

---

🎯 마무리 정리

전략	핵심 키워드
렌더링 최적화	memo, useMemo, useCallback
리스트 최적화	FlatList, windowSize
이미지 처리	fast-image, resizeMode
브릿지 최소화	Reanimated, 로그 제거
코드 분할	lazy, dynamic import
빌드 최적화	Hermes, Proguard

---

☝️ 퍼포먼스는 기능 구현만큼이나 중요하다.
앱 최적화는 기본기이자 경쟁력이다! 🔥

---