React Native + env 설정 방법
React Native + env 설정 방법에 대해 정리한 페이지입니다.
React Native + env 설정 방법
Tags
Mobile, React Native, TypeScript
Environment
OS: Windows 11
react v19.0.0
react-native v0.79.2
react-native-dotenv v3.4.11
개요
React Native + env 설정 방법에 대해 정리한 페이지입니다.
Step 1 - react-native-dotenv 패키지 설치
먼저 다음 명령어를 입력하여 react-native-dotenv
패키지를 설치합니다.
1
npm install -D react-native-dotenv
Step 2 - babel 설정하기
패키지 설치 이후에는 React Native 프로젝트에서 환경 변수를 사용할 수 있도록 babel.config.js
파일을 열고 다음 설정을 추가합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
module.exports = {
presets: ["module:@react-native/babel-preset"],
plugins: [
[
"module:react-native-dotenv",
{
envName: "APP_ENV",
moduleName: "@env",
path: ".env",
blocklist: null,
allowlist: null,
blacklist: null, // DEPRECATED
whitelist: null, // DEPRECATED
safe: false,
allowUndefined: false,
verbose: false
}
]
]
};
moduleName
: 모듈 이름을 지정합니다.path
: .env 파일 경로를 지정합니다.allowUndefined
: true일 경우, 정의하지 않은 환경 변수를 사용하려고 할 때undefined
가 반환됩니다. false일 경우, 에러가 발생합니다.
Step 3 - .env 파일 생성하기
먼저 .gitignore
파일을 열고 .env
파일을 목록에 추가합니다. 이는 Git 관리 대상에서 .env
파일을 제외시켜서 원격 저장소에 중요한 정보가 공개되지 않도록 방지하기 위함입니다.
1
2
# env
.env
이후 .env
파일을 생성한 후 다음과 같이 환경 변수 값을 정의합니다.
1
BACKEND_URL=http://localhost:8080
Step 4 - env.d.ts 파일 생성하기
TypeScript에서 환경 변수를 사용하려고 하면 다음과 같이 에러 메시지가 출력됩니다.
이 문제를 해결하기 위해선 모듈에 대한 타입을 명시해야 합니다. 다음과 같이 env.d.ts
파일을 생성한 후 .env
파일에 정의한 환경 변수 목록을 작성합니다.
1
2
3
4
5
/* env.d.ts */
declare module "@env" {
export const BACKEND_URL: string;
}
이후 다음과 같이 에러 메시지가 없어진 것을 확인할 수 있습니다.
Step 5 - 사용 예시
환경 변수를 사용한 예시는 다음과 같습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { BACKEND_URL } from "@env";
import { useNavigation } from "@react-navigation/native";
import { Button, Text, View } from "react-native";
export const HomeScreen = () => {
const navigation = useNavigation();
return (
<View>
<Text>Home</Text>
<Text>{BACKEND_URL}</Text>
<Button
title="설정화면으로"
onPress={() => navigation.navigate("Setting")}
/>
</View>
);
};
참고 자료
This post is licensed under CC BY 4.0 by the author.