ReactNative) React Native Config로 환경변수 설정

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"