react-native-config 란? + 안드로이드 세팅 방법

react-native-config 란?

react-native 에서 사용하는 설정 변수(Config variables)들을 관리할 수 있는 패키지이다.

사용법

• 프로젝트의 ROOT 경로에 설정 변수를 저장할 .env 파일을 생성한다.

API_URL=http://10.0.2.2:3105

위는 백엔드 API 서버 주소를 설정 변수로 관리한다고 가정한 것이다.
안드로이드 에뮬레이터의 경우 localhost 대신 10.0.2.2 라는 주소를 사용하니 유의하자!
IOS 에서는 다시 바꾸어주어야 한다.

• react-native-config 패키지를 설치한다.

npm install react-native-config

• 소스코드 상에서 import 후 Config.변수명 으로 이용할 수 있다.

// Axios call example
import Config from "react-native-config";

const response = await axios.post(`${Config.API_URL}/user`, {
  email,
  name,
  password,
});

사용 응용 방법

개발, 스테이징, 운영과 같이 환경별 설정 변수를 다르게 작성하고 이용할 수 있다. 운영체제별로 아래와 같은 명령어를 통해 앱을 실행하면 된다.

안드로이드인 경우에는 run-ios 만 run-android 로 변경하자.

$ ENVFILE=.env.staging react-native run-ios           # bash
$ SET ENVFILE=.env.staging && react-native run-ios    # windows
$ env:ENVFILE=".env.staging"; react-native run-ios    # powershell

주의사항

안드로이드에서는 몇가지 세팅 작업이 필요하다.

안드로이드 세팅 방법 순서대로 정리

• 패키지 설치 (package.json)

+ "react-native-config": "^1.4.8"

• 의존성 추가 (android/app/build.gradle)

// 가장 윗줄
apply plugin: "com.android.application"
+ apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"

android {
    ndkVersion rootProject.ext.ndkVersion

    compileSdkVersion rootProject.ext.compileSdkVersion

    defaultConfig {
        applicationId "com.fooddeliveryapp"
        // ...
        // 맨 뒤 인자에는 applicationId 를 넣어준다.
        + resValue "string", "build_config_package", "com.fooddeliveryapp"
    }
}

• 기타 설정 추가 (android/app/proguard-rules.pro)

+ -keep class com.fooddeliveryapp.BuildConfig { *; }

위와 같이 세팅하면 앱에서 설정 변수를 정상적으로 불러올 수 있다.