React Native 에서 dotenv 사용하기 (react-native-dotenv)

React Native 에서 dotenv 를 사용하는 방법!

React Native CLI 로 프로젝트를 생셩했다면 dotenv 를 사용하기 위해서 별도의 설정이 필요.(Expo 는 자체 제공)

여러가지 라이브러리가 있지만 react-native-dotenv 를 사용하기로 결정! 

설치

npm i react-native-dotenv 로 라이브러리설치 혹시 모르니 ios 폴더 이동 , pod install

설치가 완료되면 babel.config.json 으로 이동후 plugin 을 추가.
(babel.config.js)

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    'babel-plugin-styled-components',
    'module:react-native-dotenv',  // 이부분!!!
    'react-native-reanimated/plugin',
  ],
};

추가적으로 path 를 지정하는 방법도 있는데 자세한건 공식문서를 찾아보기

멀티 환경

각 환경 별로 .env 파일을 분리

• .env.local
• .env.development
• .env.production
  각 환경에서 파일을 읽어서 환경변수를 셋팅하도록 해야하는데 NODE_ENV 를 설정함으로써 가능.

  {
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start:local": "NODE_ENV=local react-native start", 
    "start:development": "NODE_ENV=development react-native start",
    "start:production": "NODE_ENV=production react-native start",
    "test": "jest"
  },
  ...(생략)

  NODE_ENV 설정에 따라서 env 파일이름이 결정.
• NODE_ENV=local => .env.local
• NODE_ENV=development => .env.development
• NODE_ENV=production => .env.production

실제 사용

실제 사용은 Node 에서 사용듯이 사용.

const apiUrl = process.env.API_URL