🖼️ 80. React Native 성능 최적화 완전 정리 — 렌더링, 메모리, 네트워크

---

React Native로 앱을 만들다 보면 기본 기능은 잘 동작하지만, 성능이 떨어져 UX에 문제가 생기곤 한다. 앱 최적화는 단순히 빠른 속도가 아니라 배터리 소모, 메모리 효율, UX 안정성까지 연결된다. 이번 글에서는 성능 최적화 핵심 요소들을 정리했다.

---

1. 렌더링 최적화

React Native 앱은 React의 렌더링 원리를 그대로 따른다. 불필요한 리렌더링은 성능 저하의 주요 원인이다.

1) React.memo / useCallback / useMemo

• React.memo : props 변화가 없으면 리렌더링 방지
• useCallback : 함수를 메모이제이션하여 자식 컴포넌트 불필요한 리렌더링 방지
• useMemo : 계산량 많은 연산 캐싱

const Child = React.memo(({ onClick }: { onClick: () => void }) => {
  console.log("rendered");
  return <Button title="Click" onPress={onClick} />;
});

export default function App() {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => setCount((c) => c + 1), []);
  return <Child onClick={handleClick} />;
}

2) FlatList 최적화

• keyExtractor 지정
• getItemLayout 사용해 스크롤 성능 개선
• initialNumToRender, windowSize 조절

<FlatList
  data={list}
  keyExtractor={(item) => item.id.toString()}
  renderItem={({ item }) => <Text>{item.name}</Text>}
  initialNumToRender={10}
  windowSize={5}
/>

---

2. 메모리 최적화

1) 이미지 최적화

• react-native-fast-image 사용
• 서버에서 이미지 리사이즈 후 전달
• 필요 없는 이미지 캐시는 즉시 해제

2) 메모리 릭 방지

• 이벤트 리스너 해제 필수
• setInterval / setTimeout 정리
• useEffect cleanup 활용

useEffect(() => {
  const interval = setInterval(() => {
    console.log("running...");
  }, 1000);

  return () => clearInterval(interval); // cleanup
}, []);

---

3. 네트워크 최적화

1) 캐싱

• REST API → Axios + 캐시 전략
• GraphQL → Apollo Client 캐싱
• Firebase → 오프라인 퍼시스턴스 활용

2) 배치 요청 & 지연 로딩

• 여러 API 요청을 묶어서 처리
• 중요하지 않은 데이터는 첫 화면 이후 로딩

3) CDN 활용

• 이미지, 정적 파일을 CDN에 배포해 응답 속도 개선

---

4. 네이티브 모듈 활용

JavaScript 레이어에서 무거운 연산을 하면 성능 저하가 발생한다.

• 복잡한 연산은 네이티브 모듈로 오프로드
• Expo 앱에서는 expo-modules 활용 가능

예: 영상 처리, 암호화, 대용량 데이터 압축 등

---

5. 빌드/런타임 최적화

• Hermes 엔진 활성화 → JS 실행 속도 개선
• Proguard & R8 → 안드로이드 앱 용량 축소
• Bitcode (iOS) → 성능 최적화된 바이너리 자동 생성
• Bundle Split → 초기 로딩 최적화

---

📦 성능 최적화 체크리스트

구분	체크리스트
렌더링	React.memo / useCallback / FlatList 최적화
메모리	이미지 캐시 / useEffect cleanup
네트워크	API 캐싱 / 배치 요청 / CDN
네이티브	무거운 연산은 네이티브 모듈로
빌드	Hermes / Proguard / 번들 최적화

---

🧠 정리

React Native 성능 최적화는 한 번에 끝나는 일이 아니다.

• 렌더링, 메모리, 네트워크, 네이티브 모듈, 빌드 단계까지 전체적으로 접근해야 한다.
• 특히 Hermes 엔진 활성화와 FlatList 최적화는 효과가 크다.
• 불필요한 리렌더링만 줄여도 체감 성능이 크게 좋아진다.

---