Bleeding edge

react-native에서 .env (환경 변수 관리하기) 본문

Javascript/React-Native

react-native에서 .env (환경 변수 관리하기)

codevil 2023. 9. 18. 10:54

react-native에서 환경변수를 관리하는 라이브러리는 

1. react-native-config

2. react-native 

두 가지가 있습니다.

 

react-native-config 같은 경우에는 초기 설정이 많이 있기 때문에, react-native-dotenv를 선택하였다.

 

1) install

npm i react-native-config

혹은 

yarn add react-native-config

 

2) babel config

module.exports = {
  //...
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
    ["module:react-native-dotenv", {
      "moduleName": "@env",
      "path": ".env",
      "blacklist": null,
      "whitelist": null,
      "safe": true,
      "allowUndefined": true
    }]
  ]
  //...
};

 

3) (ios인 경우) pod Install

//root 폴더에서 terminal
cd ios && pod install

 

4) .env파일 생성(root 폴더에 생성한다)

VARIABLE_KEY = VALUE

 

 

환경 변수 사용방법

import {VARIABLE_KEY} from '@env';

console.log(VARIABLE_KEY) // VALUE