react native 에서 환경설정파일 분리하기

React Native에서 환경 변수를 사용하려면 .env 파일과 이를 처리할 수 있는 라이브러리가 필요합니다. 일반적으로 많이 사용되는 라이브러리는 react-native-dotenv입니다.

다음은 react-native-dotenv를 사용하여 React Native 프로젝트에 환경 변수를 추가하는 방법에 대한 단계별 가이드입니다:

라이브러리 설치:

npm install --save react-native-dotenv

Babel 설정:
Babel 설정 파일인 babel.config.js에 플러그인을 추가합니다.

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [['module:react-native-dotenv']]
};

.env 파일 생성:
프로젝트의 루트 디렉토리에 .env 파일을 생성하고 원하는 환경 변수를 추가합니다.

API_URL=http://your-ip-address:port

React Native 코드에서 환경 변수 사용:
소스 코드 내에서 환경 변수를 불러와 사용합니다.

import { API_URL } from "@env";

console.log(API_URL); // http://your-ip-address:port
여러 환경 설정:
필요한 경우 다양한 환경 설정을 위해 여러 .env 파일을 만들 수 있습니다. 예를 들어 개발 환경과 프로덕션 환경을 위한 파일:

.env.development
.env.production

그리고 Babel 설정을 약간 수정하여 원하는 환경을 지정할 수 있습니다.

환경에 따른 빌드:
환경에 따라 빌드하려면, package.json의 스크립트 부분을 수정하면 됩니다.

"scripts": {
  "start": "react-native start",
  "android:dev": "ENVFILE=.env.development react-native run-android",
  "android:prod": "ENVFILE=.env.production react-native run-android",
  ...
}

이렇게 설정한 후, npm run android:dev 또는 npm run android:prod 명령어로 원하는 환경 설정으로 앱을 빌드할 수 있습니다.

참고로, .env 파일은 중요한 비밀 정보나 API 키를 저장하기 위한 것이 아닙니다. 이러한 중요한 정보는 앱에 포함되면 안 됩니다. 보안상의 이유로 서버나 외부 저장소에 보관하고 필요할 때만 앱에 전달하는 것이 좋습니다.