카테고리 없음
[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,
},
],
],
};