React Native 8장: 배터리·성능 최적화 실전 전략

[8장] 배터리·성능 최적화 실전 전략

1. 성능 이슈는 어디서 생기는가?

2. 리스트 최적화: FlatList 제대로 쓰기

<FlatList
  data={data}
  renderItem={renderItem}
  keyExtractor={item => item.id.toString()}
  initialNumToRender={10}
  windowSize={5}
  maxToRenderPerBatch={10}
  removeClippedSubviews={true}
/>

• initialNumToRender: 첫 렌더 시 항목 수 제한
• removeClippedSubviews: 화면 벗어난 항목 제거
• getItemLayout 설정 시 스크롤 성능 극대화 가능

3. 이미지 최적화

기본 최적화 전략

• 이미지 크기 줄이기 (서버단에서)
• 고정 사이즈 설정 (width, height 필수)
• resizeMode="cover"로 스크롤 안정성 확보

고급: 캐싱 적용

npm install react-native-fast-image

import FastImage from 'react-native-fast-image';

<FastImage
  style={{ width: 100, height: 100 }}
  source={{ uri: 'https://...' }}
  resizeMode={FastImage.resizeMode.cover}
/>

4. 불필요한 렌더링 차단

useMemo / React.memo / useCallback 적극 사용

const MemoItem = React.memo(({ item }) => {
  return <Text>{item.name}</Text>;
});

• props 변경 없으면 렌더링 생략
• 리스트 내부에 자식 컴포넌트가 있을 경우 필수

5. 배터리 최적화: 위치·BLE·알림 관리

예: react-native-background-fetch, TaskManager 등으로 제어

6. 프레임 드랍(FPS) 감지 및 개선

도구: Flipper, react-native-performance, Perf Monitor

• 렌더링 시간, JS Heap, FPS 등 실시간 확인 가능

개선 팁

• 중복 렌더링 줄이기 (console.log도 삭제)
• 애니메이션은 native driver 사용

useNativeDriver: true

• 비동기 작업은 UI 블로킹 없는 구조로 처리

7. 번들 사이즈 최적화

npx react-native bundle --platform android --dev false

• babel-plugin-transform-remove-console로 콘솔 제거
• 불필요한 아이콘, 폰트, 이미지 제거
• 코드 스플리팅은 제한적이지만 로직 분리는 반드시 필요

요약

• 리스트는 FlatList 성능 옵션 + memoization이 핵심
• 이미지는 크기 제한 + 캐싱 라이브러리 적용
• 배터리 과소모는 위치·BLE 등 장치 접근 코드에서 조심
• Flipper 등으로 성능 측정 후 렌더링, 애니메이션, 네이티브 드라이버 순서로 최적화

심화학습

Q1. FlatList에서 keyExtractor를 index로 하면 안 되는 이유는?
A1. index는 데이터 순서가 바뀔 때마다 컴포넌트를 다시 렌더링시킨다. 고유 ID를 키로 써야 리렌더링을 최소화할 수 있다.

Q2. 이미지 캐싱을 서버에서 처리하는 게 더 낫지 않나요?
A2. 맞다. 기본적으로 CDN, WebP, 사이즈 최적화된 이미지를 서버단에서 제공하고, 클라이언트는 캐싱만 잘 처리하면 된다.

Q3. 렌더링 문제인지, 애니메이션 문제인지 구분하려면 어떻게 해야 하나요?
A3. Flipper에서 FPS 하락이 렌더링 시점에만 발생하면 렌더 문제. 애니메이션 도중에만 프레임 드랍이 발생하면 useNativeDriver 누락, 또는 반복 애니메이션 과다일 가능성이 크다.