React Native 성능 향상: UI 및 네이티브 최적화 빠른 팁

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

앱 개발

대상자

React Native 개발자 (중간 수준)

핵심 요약

• React.memo 사용으로 불필요한 리렌더링 회피
• FlatList/SectionList로 긴 리스트 렌더링 효율성 향상
• react-native-reanimated로 애니메이션 최적화
• 네이티브 모듈로 무거운 작업 이관
• Hermes 엔진 활성화로 메모리 사용량 감소 및 실행 속도 향상

섹션별 세부 요약

1. 리렌더링 최적화

• React.memo를 사용해 컴포넌트의 props 변화 여부를 비교하여 리렌더링 방지
• shouldComponentUpdate 대신 React.memo를 추천 (성능 향상)
• 컴포넌트 트리의 상위 레벨에서 적용 효과 큼

2. 리스트 렌더링 최적화

• FlatList는 무한 스크롤 지원, SectionList는 섹션 기반 데이터 분리
• keyExtractor로 고유 ID 제공 필수 (리렌더링 효율성)
• initialNumToRender 설정으로 초기 렌더링 항목 수 제어

3. 애니메이션 최적화

• react-native-reanimated 라이브러리 사용 (JS 쓰레드에서 분리된 애니메이션 처리)
• Animated API 대신 reanimated 사용으로 FPS 유지
• 복잡한 애니메이션은 reanimated의 useSharedValue 활용

4. 네이티브 모듈 활용

• NativeModules를 통해 JS에서 네이티브 코드 호출
• CPU 집약적 작업 (이미지 처리, 네트워크 요청 등)은 네이티브로 이관
• JSCallInvoker와 NativeCallInvoker 간의 통신 구조 이해 필수

5. Hermes 엔진 활성화

• Hermes는 JavaScriptCore 대체 엔진 (메모리 사용량 30% 감소)
• android/app/src/main/assets/index.android.bundle 파일 생성 시 Hermes 옵션 활성화
• iOS에서는 Hermes 지원 없음 (JavaScriptCore만 사용)

결론

• React.memo, FlatList, react-native-reanimated, Hermes 엔진 적용을 통해 UI 성능 향상
• 네이티브 모듈 활용 시 NativeModules API 사용
• 실제 앱에서 React DevTools와 Flipper로 프로파일링 도구 사용 권장