카테고리 없음

[React Native] .env 환경 변수 사용하기

HJ:: 2023. 11. 5. 15:02
그냥 React에서는 REACT_APP_API_KEY 이런식으로 하고, local.env.REACT_APP_API_KEY 이런식으로 사용해줬으면 됐지만,
React Native는 달랐다.

 

 

 

 

 

사용법

 

yarn add react-native-dotenv

yarn add --dev @types/react-native-dotenv
// babel.config.js

module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
  plugins: [
    [
      "module-resolver",
      {
        root: ["./src"],
        extensions: [
          ".ios.ts",
          ".android.ts",
          ".ts",
          ".ios.tsx",
          ".android.tsx",
          ".tsx",
          ".jsx",
          ".js",
          ".json",
        ],
        alias: {
          "@": "./src",
          "@components": "./src/components",
          "@containers": "./src/containers",
          "@modules": "./src/modules",
          "@scenes": "./src/scenes",
          "@utils": "./src/utils",
          "@screens": "./src/screens",
          "@assets": "./src/assets",
        },
      },
    ],
    [
      "module:react-native-dotenv",
      {
        moduleName: "@env",
        path: ".env",
        safe: false,
        aloowUndefined: true,
      },
    ],
  ],
};

 

 

 

 

- .gitignore 파일에 '.env'를 넣어서 github에 안 올라가게끔 해준다.

// .gitignore

# local env files
.env*.local
.env

 

 

 

- .env파일에 해당 API 변수를 선언 해준다.

// .env

API_KEY= "[Your_API_KEY]"

 

 

- @env를 정상적으로 불러와주기 위해  env.d.ts 파일에서 불러올 타입을 정해준다.

// env.d.ts

declare module "@env" {
    export const API_KEY: string;
  }

 

 

- .env 환경 변수 사용

import { API_KEY } from "@env";

  const url = `https://identitytoolkit.googleapis.com/v1/accounts:${mode}?key=${API_KEY}`;

 

 

 

 

// babel.config.js

module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
  plugins: [
    [
      "module-resolver",
      {
        root: ["./src"],
        extensions: [
          ".ios.ts",
          ".android.ts",
          ".ts",
          ".ios.tsx",
          ".android.tsx",
          ".tsx",
          ".jsx",
          ".js",
          ".json",
        ],
        alias: {
          "@": "./src",
          "@components": "./src/components",
          "@containers": "./src/containers",
          "@modules": "./src/modules",
          "@scenes": "./src/scenes",
          "@utils": "./src/utils",
          "@screens": "./src/screens",
          "@assets": "./src/assets",
        },
      },
    ],
    [
      "module:react-native-dotenv",
      {
        moduleName: "@env",
        path: ".env",
        safe: false,
        aloowUndefined: true,
      },
    ],
  ],
};

 

 

 

 

 

 

참조

https://velog.io/@strongorange/React-Native%EC%97%90%EC%84%9C-env-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0