React Native 앱 성능을 어떻게 최적화하나요?

Question

Accepted Answer

React Native 성능 최적화는 불필요한 **re-render** 최소화, 효율적인 **목록**, **JS 스레드** 작업과 bridge 트래픽 감소, 이미지 최적화, animation에 네이티브 스레드 사용을 포함합니다. 성능은 매끄럽고 반응성 좋은 앱에 중요합니다.

## re-render 최소화 (핵심 React 관심사)

```text
✓ 불필요한 RE-RENDER 피하기:
  → React.memo (component 메모이제이션), useMemo (값), useCallback (함수)
  → 목록에 올바르고 안정적인 KEY; 자식 재렌더링을 유발하는 인라인 새 객체/함수
    생성 피하기
  → 적절한 state 구조 (모든 것을 하나의 큰 state에 넣어 전부 재렌더링하지 않기)
```

## 효율적인 목록

```text
✓ 긴 목록에 FLATLIST 사용 (ScrollView + map이 아님) — 지연 렌더링/가상화
✓ FlatList 최적화: keyExtractor, getItemLayout, windowSize, removeClippedSubviews;
  항목 컴포넌트를 가볍고 메모이제이션 상태로 유지
✓ 매우 크고 복잡한 목록 → FlashList (Shopify) — 더 빠른 drop-in 대안
```

## JS 스레드와 bridge

```text
✓ JS 스레드는 코드를 실행함 — 반응성을 위해 비워두기 (무거운 동기 작업 피하기;
  jank/프레임 드롭 유발)
✓ BRIDGE 트래픽 최소화 (구 아키텍처) — 빈번한 JS↔네이티브 전달은 비용이 큼
  (새 아키텍처 / JSI가 이를 줄임)
✓ ANIMATION을 네이티브 스레드에서 실행 (useNativeDriver / Reanimated) — JS 스레드 아님
✓ 무거운 계산 오프로드; 비용 큰 작업 debounce
```

## 기타 최적화

```text
✓ 이미지 최적화 (크기, 캐싱 — 예: FastImage); lazy-load
✓ 앱 시작 시간과 번들 크기 감소; Hermes (최적화된 JS 엔진) 사용
✓ 병목 찾기 위해 PROFILE (Flipper, 성능 모니터, React DevTools profiler)
✓ 저사양 기기에서 테스트 (고사양만이 아님)
```

## 왜 중요한가

React Native 성능 최적화를 이해하는 것은 가치 있는 senior 수준 지식인데, **매끄러운 성능은 좋은 사용자 경험에 필수**이고 React Native는 구체적 성능 고려사항이 있어 품질 좋은 앱 개발에 중요하기 때문입니다.

웹용 React처럼 핵심 관심사는 **불필요한 re-render 최소화**(React.memo, useMemo, useCallback, 안정적 key, 적절한 state 구조를 사용해 불필요하게 컴포넌트를 재렌더링하지 않기)로, React Native 앱에서 흔한 성능 문제입니다. **효율적인 목록**은 결정적입니다. 긴 목록에 적절한 최적화(keyExtractor, getItemLayout, 가볍고 메모이제이션된 항목 컴포넌트)와 함께 **FlatList**(ScrollView + map이 아님)를 사용하고, 매우 큰 목록에는 **FlashList**를 사용 — 목록은 흔하고 잘못 렌더링된 목록은 실제 성능 문제를 일으키기 때문입니다.

**JS 스레드와 bridge** 고려사항을 이해하는 것은 특히 중요하고 React Native 고유합니다. **JS 스레드는 반응성을 위해 비워둬야** 하고(무거운 동기 작업은 jank 유발), **bridge 트래픽**(구 아키텍처에서)은 비용이 크므로 JS↔네이티브 통신을 최소화해야 하며(새 아키텍처/JSI가 이를 줄임), 결정적으로 **animation은 네이티브 스레드에서 실행**(useNativeDriver/Reanimated를 통해, JS 스레드가 아님)하여 매끄러움을 유지 — 이들은 React Native의 고유한 JS/네이티브 스레딩 아키텍처와 그 성능 함의를 반영합니다.

기타 최적화(캐싱이 있는 이미지 최적화, 시작/번들 크기 감소, Hermes 사용, 병목을 찾는 프로파일링, 저사양 기기 테스트)가 도구를 완성합니다.

매끄러운 성능은 UX에 직접 영향을 미치고, React Native의 아키텍처는 일반적인 React 최적화를 넘어 구체적 고려사항(JS 스레드, bridge, 네이티브 스레드 animation)을 도입합니다.

매끄러운 성능이 UX에 필수이고 React Native가 구체적 성능 고려사항(re-render, 효율적 목록, JS 스레드/bridge, 네이티브 스레드 animation)을 가지며, 이를 다루는 적절한 최적화가 앱을 매끄럽게 유지하므로, React Native 성능 최적화를 이해하는 것은 반응성 좋고 세련된 앱을 만드는 가치 있는 senior 수준 지식입니다 — React 최적화(re-render, 목록)와 React Native 고유 관심사(JS 스레드, bridge, 네이티브 animation)를 모두 반영하는 핵심 기술이며, senior React Native 개발자에게 기대되는 성능 인식에 중요합니다.