[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: ['module:metro-react-native-babel-preset'],
  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