[RN] .env dotenv 사용하기

📱테스트 환경

"react": "18.2.0"
"react-native": "0.74.2"

---

React Native 에서 env 를 사용하러면 설정해야 할 값들이 좀 있어서

까먹지 않기위해 작성한다.

바로 레츠꼬

yarn add react-native-dotenv

// ts용
yarn add --dev @types/react-native-dotenv

필요한 모듈 설치해주고

bable.config.js 로 가서

plugins: [
	...
    [
      'module:react-native-dotenv',
      {
        moduleName: "@env",
        path: ".env",
        safe: false, //  파일에 지정되지 않은 환경 변수가 있는 경우, 오류 없이 통과하도록 설정
        allowUndefined: true, // 정의되지 않은 변수도 허용하도록 설정
      },
    ],
    ...
  ],

해주면 설정은 끝난다.

사실

[
  'module:react-native-dotenv',
  {
    moduleName: '@env',
    path: '.env',
  },
],

이렇게만 작성해줘도 문제없이 사용할 수 있지만

추가적인 설정을 통해 좀더 정확하게 사용할 수 있을 것 같아 작성해봤다.

생각보다 간단하지만 환경설정은 항상 어려워~

사용하는 방법은 다음과 같다.

declare module '@env' {
  export const DEV_API_URL_IOS: string;
  export const DEV_API_URL_ANDROID: string;
  export const PROD_API_URL: string;
}

env.d.ts 에 타입을 정의해놓고

DEV_API_URL_IOS=http://127.0.0.1:8000/
DEV_API_URL_ANDROID=http://10.0.2.2:8000/
PROD_API_URL=https://{주소}

env 에 해당 값들을 정의해놓고 사용할때는

import {DEV_API_URL_ANDROID, DEV_API_URL_IOS, PROD_API_URL} from '@env';

이렇게 불러다가 사용하면 끝~