[React Native] react-native-config 라이브러리 적용하기

개요

본 글에서는 React Native 프로젝트에서 환경 변수를 관리하기 위한 react-native-config 라이브러리의 설정 방법을 안내합니다. 개발, 로컬, 상용 등 여러 환경에서 서로 다른 환경 변수를 사용해야 할 때 이 라이브러리를 활용하면 효과적으로 환경을 분리하여 관리할 수 있습니다.

개발 환경

본 가이드는 다음 버전을 기준으로 작성되었습니다:

React Native: 0.74.5
react-native-config: 1.5.3

환경 변수 파일 만들기

본 글은 3개의 환경으로 작성합니다.

• dev: 개발 서버 환경
• local: 로컬 서버 환경
• dev: 상용 서버 환경

프로젝트 경로/env/.env.dev

ENV=DEV
API_HOST=

프로젝트 경로/env/.env.local

ENV=LOCAL
API_HOST=

프로젝트 경로/env/.env.prod

ENV=PRDO
API_HOST=

Setup

패키지 설치:

yarn add react-native-config

CocoaPods을 사용하는 경우:

(cd ios; pod install)

Android

android/app/build.gradle:

... 생략


/** 개발 환경에 따른 환경변수 config 파일 **/
project.ext.envConfigFiles = [
    devDebug: "env/.env.dev",
    devRelease: "env/.env.dev",
    localDebug: "env/.env.local",
    prodDebug: "env/.env.prod",
    prodRelease: "env/.env.prod",
    anothercustombuild: ".env",
]

apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"

android {
    ... 생략

    flavorDimensions += 'version'
    productFlavors {
        dev {
            dimension 'version'
        }
        local {
            dimension 'version'
        }
        prod {
            dimension 'version'
        }
    }
}

iOS

XCConfig 파일 생성

1. 파일 트리를 클릭하고 XCConfig 유형의 새 파일을 만듭니다.

2. "Config.xcconfig"라는 이름으로 ios 폴더에 저장하고 다음의 내용을 추가합니다:

#include? "tmp.xcconfig"

3. ".gitignore"에 다음을 추가하세요:

# react-native-config codegen
ios/tmp.xcconfig

4. 프로젝트에 config 적용하기

PROJECT > Info > Configurations에 Debug, Release에 Config 적용

Scheme 생성

1. scheme을 생성합니다.

본 글 기준으로 3개('dev', 'local', 'prod')의 scheme을 생성해야 하지만 'dev' 예시만 작성하겠습니다.

scheme은 프로젝트에서 설정한 alias에 맞게 생성하면 됩니다.

2. scheme에 Run Script 액션을 추가합니다.

Edit Sheme > Build > Pre-actions로 이동하여 다음의 스크립트를 추가합니다:

cp "${PROJECT_DIR}/../env/.env.dev" "${PROJECT_DIR}/../.env"

"${SRCROOT}/../node_modules/react-native-config/ios/ReactNativeConfig/BuildXCConfig.rb" "${SRCROOT}/.." "${SRCROOT}/tmp.xcconfig"

Build

package.json에 다음의 스크립트를 추가합니다:

  "scripts": {
    "android:dev": "react-native run-android --mode=devDebug",
    "android:local": "react-native run-android --mode=localDebug",
    "android:prod": "react-native run-android --mode=prodDebug",
    "ios:dev": "react-native run-ios --scheme dev",
    "ios:local": "react-native run-ios --scheme local",
    "ios:prod": "react-native run-ios --scheme prod",
  },

Usage

import Config from 'react-native-config'


const apiHost = Config.API_HOST