기술 블로그

react-native-cli 패키지명 변경 본문

프론트엔드

react-native-cli 패키지명 변경

jaegwan 2025. 2. 27. 10:11
반응형

React Native 앱 패키지명 & 번들 식별자 변경 가이드

React Native로 앱을 만들다 보면, 처음에는 com.myapp처럼 간단히 패키지명을 써 두고 진행하게 됩니다. 하지만 서비스를 런칭하기 직전 혹은 중간에 회사 도메인 규칙이나 프로젝트 이름이 바뀌어야 할 때, “패키지명을 어디서부터 바꿔야 하지?”라는 고민에 빠지곤 하죠.
이번 포스팅에서는 iOS와 안드로이드에서 패키지명(또는 번들 식별자)을 수동으로 변경하는 방법과 react-native-rename 라이브러리를 이용해 한 번에 바꾸는 방법을 간단히 정리해 보겠습니다.


1. 패키지명 vs. 번들 식별자

  1. 안드로이드:
    • applicationId라고도 부르고, 흔히 “패키지명”이라고 부릅니다.
    • 예: com.mycompany.myapp.
    • AndroidManifest.xml<manifest> 태그에 package 속성이 있고, app/build.gradledefaultConfig 내에 applicationId가 설정되어 있습니다.
  2. iOS:
    • 흔히 “번들 식별자(Bundle Identifier)”라고 부릅니다.
    • 예: com.mycompany.myapp.
    • Xcode에서 General > Identity > Bundle Identifier 항목 또는 PRODUCT_BUNDLE_IDENTIFIER 세팅으로 관리됩니다.

정식 앱 스토어(Play Store, App Store)에 올릴 때 이 둘은 각 플랫폼에서 고유한 앱 식별자로 쓰이므로, 프로젝트 초반에 잘 정해두는 것이 중요합니다.


2. 수동으로 변경하기

2.1 안드로이드 (Android)

  1. app/build.gradle 수정
    • 경로: android/app/build.gradle
    • android { defaultConfig { ... } } 안의 applicationId를 원하는 값으로 변경:
      android {
        defaultConfig {
          applicationId "com.mycompany.myapp"  // 예시
          ...
        }
        ...
      }
  2. AndroidManifest.xml 수정
    • 경로: android/app/src/main/AndroidManifest.xml
    • 맨 위 <manifest> 태그의 package 속성을 일치시킵니다:
      <manifest
        xmlns:android="http://schemas.android.com/apk/res/android"
        package="com.mycompany.myapp"> <!-- 변경 -->
        ...
      </manifest>
  3. Java/Kotlin 코드 패키지명(경로) 변경
    • 경로: android/app/src/main/java/com/기존패키지/
    • 디렉터리 구조도 com.mycompany.myapp 형태로 변경해줘야 합니다.
    • 예:
      java
      └── com
          └── mycompany
              └── myapp
                  ├── MainActivity.java
                  └── MainApplication.java
    • MainActivity.java, MainApplication.java 안에서도 맨 위의 package com.old.package;package com.mycompany.myapp;로 수정
  4. Gradle Clean
    cd android
    ./gradlew clean
    • 그리고 다시 프로젝트 루트로 돌아가
      npx react-native run-android
    • 변경된 패키지명으로 앱이 빌드되고 실행되는지 확인

2.2 iOS (iOS)

  1. Xcode에서 변경
    • ios/프로젝트이름.xcworkspace 열기:
      open ios/MyApp.xcworkspace
    • 왼쪽 “Project Navigator”에서 프로젝트(파란색 아이콘) 클릭
    • Targets 중 앱 타겟 선택 → 상단 “General” 탭
    • “Identity” 섹션의 Bundle Identifier 항목을 원하는 값(예: com.mycompany.myapp)으로 변경
  2. Info.plist 또는 Build Settings 확인
    • PRODUCT_BUNDLE_IDENTIFIER 값이 자동으로 변경되었는지 확인
  3. 클린 빌드
    cd ios
    xcodebuild clean
    cd ..
    npx react-native run-ios
    • 또는 Xcode 메뉴: Product > Clean Build FolderRun

이 과정을 거치면 iOS 앱 번들 식별자도 새 값으로 설정되어, App Store Connect에 업로드 시 문제가 없습니다.


3. 라이브러리 사용: react-native-rename

만약 안드로이드/iOS 모두를 한 번에 자동으로 바꾸고 싶다면, react-native-rename 라이브러리를 쓰는 방법도 있습니다. 단, 예전 버전의 React Native나 복잡한 설정이 있는 프로젝트에서는 간혹 충돌이 날 수 있으니, Git 커밋을 미리 해둔 뒤 시도하시길 추천합니다.

# 프로젝트 루트에서
npm install -g react-native-rename

이후, 원하는 새 앱 이름(앱의 표시 이름)과 패키지명을 아래처럼 지정:

npx react-native-rename "MyNewAppName" -b com.mycompany.myapp

명령을 실행하면 안드로이드와 iOS에서 해당 문자열을 찾아 일괄 변경합니다.
이후엔 마찬가지로:

cd ios
pod install
cd ..
npx react-native run-android
npx react-native run-ios

만약 MainActivity.java 위치나 iOS Info.plist가 정상적으로 바뀌지 않았다면, 직접 수동으로 확인하고 수정해야 할 수도 있습니다.


4. 자주 겪는 에러 & 팁

  1. 'duplicate files' 에러
    • 패키지명을 바꾼 뒤 이전 폴더 구조나 파일이 남아 있으면 충돌이 납니다. android/app/src/main/java/ 안의 옛 패키지 폴더를 깔끔히 지우고, 새 폴더 구조로 옮겼는지 확인하세요.
  2. iOS "Bundle ID already in use"
    • 해당 번들 식별자를 App Store Connect에 이미 등록한 앱이 있을 수 있습니다. 다른 이름을 쓰거나, 기존 앱에 대한 처리를 마무리해야 합니다.
  3. Pod Install 필수
    • iOS 쪽은 패키지명(번들 식별자) 자체를 바꾸는 것만으로는 Pod가 크게 달라지진 않지만, 새롭게 설치된 라이브러리가 있다면 pod install을 잊지 말아야 합니다.

마무리

React Native 앱을 만들다 보면, 프로젝트 초반에 정해둔 패키지명/번들 식별자를 중간에 변경해야 하는 상황이 자주 생깁니다. 안드로이드에서는 applicationIdAndroidManifest.xml 패키지 속성, iOS에서는 Bundle Identifier(또는 PRODUCT_BUNDLE_IDENTIFIER)를 바꿔줘야 하며, 필요한 경우 react-native-rename을 통해 일괄 변경도 가능합니다.

이 과정을 마친 뒤에는 꼭 Clean 빌드를 해서 잘 적용되는지 확인하고, 문제가 생기는 부분(폴더 구조, 남아 있는 이전 패키지명, Pod 설치 여부)을 꼼꼼히 살피면 됩니다. 이렇게 패키지명과 번들 식별자만 바꿔도, 완전히 다른 앱으로 스토어에 배포할 수 있으니, 프로젝트 전반에서 충돌이 없도록 주의하세요.

“아무리 간단해 보여도, 변동 사항이 많을 땐 수시로 Git 커밋을 해두고 실수를 되돌리기 쉽도록 준비해두는 게 최고의 안전장치다.”

이상으로 React Native 앱 패키지명 & 번들 식별자를 바꾸는 방법을 정리했습니다. 도움이 되었길 바랍니다.


Reference

반응형
Comments