FrontEnd/React Native
ReactNative) React Native Config로 환경변수 설정
Bumang
2024. 5. 29. 19:52
React Native Config란?
React Native Config는 React Native 애플리케이션에서 환경 변수를 관리하는 라이브러리이다.
이 라이브러리를 사용하면, 앱의 설정값들을 별도의 환경 파일에 정의하고,
이를 React Native 코드와 네이티브 코드(Android 및 iOS)에서 쉽게 사용할 수 있다.
이를 통해 개발 환경, 스테이징 환경, 프로덕션 환경 등 다양한 환경에서 서로 다른 설정값을 사용할 수 있다.
왜 쓰나? 그냥 .env파일을 쓰면 안 되나?
장점 1. 네이티브 환경과의 통합
리액트 네이티브 앱은 자바스크립트 코드뿐만 아니라 네이티브 코드(iOS와 Android)에서도 환경 변수를 사용할 필요가 있다.
.env 파일을 직접 사용하는 경우, 이를 네이티브 환경에 전달하는 것은 번거롭고 복잡할 수 있다.
React Native Config는 이 과정을 자동화하여 환경 변수를 네이티브 코드에서도 쉽게 사용할 수 있게 해준다.
장점 2. 빌드 타입별 설정
다양한 빌드 타입(개발, 스테이징, 프로덕션 등)에 대해 서로 다른 환경 변수를 쉽게 관리할 수 있다.
React Native Config를 사용하면 .env.development, .env.staging, .env.production 등의 파일을 통해
빌드 타입별로 구분된 환경 변수를 자동으로 설정할 수 있다.
사용법
1. 환경변수, 키 값을 저장할 config 패키지를 저장한다.
npm i react-native-config
import Config from 'react-native-config';
2. 모듈 익스포트를 해준다.
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'module:react-native-dotenv',
{
moduleName: '@env',
path: '.env',
blacklist: null,
whitelist: null,
safe: false,
allowUndefined: true,
},
],
],
};
3. .env파일에서 원하는 값을 만들어준다.
API_URL=https://api.example.com
APP_ENV=development
4. 이제 @env에서 꺼내 쓸 수 있다.
import { API_URL, APP_ENV } from '@env';
console.log(API_URL); // "https://api.example.com"
console.log(APP_ENV); // "development"