✅ 68. React Native 환경 변수 설정 및 관리 방법

---

앱 개발에서도 환경별 설정 분리는 필수다.
특히 React Native에서는 개발(dev), 스테이징(stage), 프로덕션(prod) 등의 환경에 따라
API 주소, 로그 출력 여부, 기능 플래그 등을 다르게 설정해야 하는 경우가 많다.

이 글에서는 React Native에서 환경 변수(environment variables)를 설정하고 관리하는 방법을 정리한다.

---

🔧 1. 왜 환경 변수가 필요한가?

• 배포 대상별로 설정을 분리하고 싶을 때
• GitHub 등 코드 저장소에 민감한 정보를 숨기고 싶을 때
• 앱 빌드 시점에 환경별 분기 처리가 필요할 때

---

📦 2. .env 파일로 설정 분리하기

설치

npm install react-native-dotenv
# 또는
yarn add react-native-dotenv

babel 설정 추가 (babel.config.js)

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [['module:react-native-dotenv']],
};

.env 파일 구성

# .env.development
API_URL=https://dev.api.example.com
IS_DEBUG=true

# .env.production
API_URL=https://api.example.com
IS_DEBUG=false

---

🔄 3. 환경 파일 불러오기

import { API_URL, IS_DEBUG } from '@env';

console.log(API_URL); // https://dev.api.example.com

.env에 정의된 키는 반드시 @env에서 import 해야 한다.
⚠️ 주의: import 시 타입 정의가 필요할 수 있다.

---

🗂 4. 환경별로 빌드 스크립트 나누기

예시 (Android)

ENVFILE=.env.development npx react-native run-android
ENVFILE=.env.production npx react-native run-android

예시 (iOS)

ENVFILE=.env.staging npx react-native run-ios

---

🧠 5. Tip: TypeScript에서 안전하게 쓰기

declare module '@env' {
  export const API_URL: string;
  export const IS_DEBUG: boolean;
}

---

🎯 마무리 요약

목적	방법
환경 변수 설정	.env 파일 사용
안전한 불러오기	@env 모듈 import
타입 보장	declare module 사용
환경별 실행	ENVFILE=... 명령어 활용

---

⚠️ 환경 변수는 보안 수단이 아니다.
클라이언트 앱은 결국 디컴파일 시 모든 정보를 드러낼 수 있기 때문에,
진짜 민감한 정보는 서버에서만 처리하자.

---