React native 환경변수 설정방법

대망의 백앤드와의 연결을 위해 React native의 환경변수 설정을 알아보았다.

React와 React native의 환경 변수 설정 차이점

1. 파일 위치 및 이름
   두 라이브러리는 모두 루트 디렉토리에 .env파일을 생성하여 환경변수를 설정한다. 이 때 React Native는 iOS와 Android를 각각 다른 환경에서 실행할 수 있으므로, 각 플랫폼별로 .env 파일을 따로 생성할 수 있다. ex) .env.ios, .env.android

2. 환경 변수 접근 방법
   React는 .env 파일에 REACTAPP 접두사를 붙여야만 React에서 인식할 수 있는 환경 변수로 간주되는데 React native도 비슷하게 .env 파일에서 REACTNATIVE_APP을 접두사로 사용하고 process.env.REACTNATIVE_APP으로 환경 변수에 접근할 수 있다.

3. iOS와 Android에서의 차이점
   React는 웹 브라우저 상에서 동작하기 때문에 브라우저 환경에서 .env 파일의 변수를 사용하지만 React Native는 JavaScript 코드를 실행하면서 내부적으로 iOS와 Android 네이티브 코드와 상호작용하므로, React Native에서는 .env 파일의 변수를 사용하더라도 iOS와 Android에서 직접적으로 사용되지 않고 빌드 시에 각 플랫폼 별로 .env 파일의 내용의 환경변수를 각각 적용한다.

4. 환경변수 사용 여부
   React의 경우, 환경 변수는 개발 환경에서만 사용되지만 React Native 앱은 빌드 시에 .env 파일의 변수를 번들에 포함하여 개발 및 배포 환경에서 환경변수를 사용한다.

위와 같이 React Native와 React의 환경 변수 처리에는 차이가 있기 때문에 React Native에서는 주로 환경변수 라이브러리를 사용한다.
dotenv의 경우 주로 Node.js 백엔드 프로젝트에서 사용되며, 환경변수를 빌드 프로세스와 분리하여 관리하는 역할에 충실한 반면에 react-native-config는 빌드 시에 .env 파일의 내용을 포함하여 각 환경에서 필요한 설정 값을 관리하는데 유용하기 때문에 React Native 프로젝트에서 자주 사용된다고 한다.

React-native-config 사용하기

1. 라이브러리 설치

npm install --save react-native-config

2. 프로젝트 루트 디렉토리에 환경 변수 생성

// .env
API_APP_KEY = yourValue

3. 안드로이드 추가 설정

• android/settings.gradle 하단에 코드 추가

code android/settings.gradle

// ...중략
include ':react-native-config'
project(':react-native-config').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-config/android')

• android/app/build.gradle 하단에 코드 추가

code android/app/build.gradle

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

4. 환경변수를 엑세스 하려는 파일에 import 후 접근하기

import Config from "react-native-config";
// ...중략
const key = Config.API_APP_KEY;