Published on

React Native 6단계: 앱 최적화 및 배포

[6단계] 앱 최적화 및 배포

1. 성능 최적화

리스트 최적화

  • FlatList에는 keyExtractor, initialNumToRender, removeClippedSubviews 등을 설정
<FlatList
  data={data}
  keyExtractor={item => item.id.toString()}
  initialNumToRender={10}
  removeClippedSubviews={true}
/>

이미지 캐싱

  • 기본 Image는 캐싱이 약함 → expo-image, react-native-fast-image 사용 고려

불필요한 렌더링 방지

  • memo, useCallback, useMemo 적극 사용
  • 상태를 필요 이상으로 상위 컴포넌트에 두지 말 것

2. 에러 방지 및 로깅

try-catch 활용

try {
  await someApi();
} catch (e) {
  console.log('에러 발생', e);
}

앱 크래시 방지

  • 필수 권한 없을 경우 예외 처리
  • 네트워크 오류 대비 fallback UI 제공

외부 로깅 도구

  • Sentry, Bugsnag, Firebase Crashlytics 등 연동 가능

3. 환경변수(.env) 관리

npm install react-native-dotenv

.env

API_URL=https://api.example.com
  • 실서버, 개발서버 구분 필수
  • 절대 키, 토큰, 비밀번호 등은 코드에 직접 쓰지 말 것

4. 앱 빌드

Expo

npx expo build:android
npx expo build:ios

또는 최신:

npx expo export
npx eas build --platform android
  • Android: .apk, .aab 파일 생성
  • iOS: Apple 개발자 계정 필요 (Mac + Xcode)

5. 스토어 배포 흐름

Android

  1. Google Play Console 가입
  2. 앱 등록 → 번들(.aab) 업로드
  3. 아이콘, 스크린샷, 설명 등록
  4. 검수 요청 → 며칠 후 출시

iOS

  1. Apple Developer 가입(유료)
  2. Xcode + App Store Connect 사용
  3. 빌드 업로드, 심사 요청
  4. 검수 후 앱 출시

6. OTA 업데이트 (Over-The-Air)

  • Expo의 장점: 앱을 다시 빌드하지 않아도 JS 코드 수정 가능
  • OTA 적용을 위해 expo publish 사용
npx expo publish

요약

  • 성능 최적화: 리스트 최적화, 캐싱, memoization 필수
  • 예외처리와 로깅은 앱 품질의 핵심
  • 환경변수 관리로 보안 유지
  • Expo는 배포가 간편하고, OTA 업데이트까지 지원

심화학습

Q1. Android와 iOS에 동일한 코드를 배포하면 UI나 기능이 깨지는 경우가 생기는 이유는?
A1. 플랫폼마다 폰트, 시스템 UI, 권한 시스템 등이 다르기 때문. Platform.OS, SafeAreaView, 조건부 스타일링 등을 사용해서 대응해야 한다.

Q2. Expo 앱을 마켓에 올리기 전에 꼭 확인해야 할 체크리스트가 있을까?
A2.

  • 권한 설정 및 설명 (app.json)
  • 앱 아이콘/스플래시 이미지
  • 비정상 종료 여부 (에러 로그 확인)
  • Android는 추가로 백버튼 대응 필요
  • 네트워크 요청은 HTTPS 사용 필수

Q3. 앱을 실시간으로 업데이트하고 싶은데, OTA 말고는 방법이 없을까?
A3. 기본적으로 JS 레이어 업데이트는 OTA(Publish)로 충분하지만, 네이티브 기능 변경이 필요하다면 완전 재배포(빌드)가 필요하다. 클라우드 기능 업데이트는 Firebase Remote Config 등을 활용할 수도 있다.