[React Native] 환경 변수 파일 사용하기 (react-native-dotenv)

환경 변수 파일 사용하기 (react-native-dotenv)

들어가며

• 리액트 네이티브(React Native)에서 환경 변수 파일(@env@)을 사용하는 방법을 정리해본다.
• @react-native-dotenv@ 라이브러리를 이용하여 환경 변수를 사용하는 방법이다.

 

방법

1️⃣ react-native-dotenv 패키지 설치하기

• 터미널에 아래 명령을 실행하여 프로젝트에 @react-native-dotenv@ 패키지를 설치한다.

$ npm install react-native-dotenv    # yarn add react-native-dotenv

 

2️⃣ @.env@ 파일 생성하기

• 프로젝트 최상단 경로에 @.env@ 파일을 생성하고 환경 변수를 설정한다.

API_URL=https://api.example.com
APP_SECRET=mysecretkey

 

3️⃣ Babel 설정하기

• React Native에서는 Babel을 사용하여 코드를 변환한다.
• 따라서, @react-native-dotenv@ 패키지를 사용하려면 Babel 설정 파일(@babel.config.js@)을 수정해줘야 한다.
• 프로젝트 최상단 경로에 있는 Babel 설정 파일(@babel.config.js@)을 열고 다음과 같이 @react-native-dotenv@를 플러그인(@plugins@)에 추가해준다.

module.exports = {
  presets: ['babel-preset-expo'],
  plugins: [
    ['module:react-native-dotenv', {
      moduleName: '@env',
      path: '.env',
    }],
  ],
};

 

4️⃣ 환경 변수 사용하기

• 다음과 같이 @＠env@ 패키지에서 불러오고자 할 환경변수명을 import 한 후, 필요한 곳에 불러와 사용한다.

import { Text, View } from 'react-native';
import { API_URL, APP_SECRET } from '@env';   // 사용하고자 할 환경변수명 불러오기

const App = () => {
  return (
    <View>
      <Text>API URL: {API_URL}</Text>
      <Text>App Secret: {APP_SECRET}</Text>
    </View>
  );
};

export default App;

 

참고 사이트

React Native Dotenv - Using environment variables in React Native

react-native-dotenv