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