[RN] React Native/Typescript 환경에서 env 파일 사용하는 방법

서론

대상독자

RN 개발 시, env 파일을 사용하고 싶은 개발자

학습목표

오늘은 RN Expo와 타입스크립트 환경에서 env 파일을 설정하는 방법에 대해서 알아보겠습니다.

본론

라이브러리 설치하기

// js
yarn add react-native-dotenv;
// ts 
yarn add -D @types/react-native-dotenv;

react-native-dotenv를 설치해줍니다. 타입스크립트의 경우, 타입을 지정하기 위한 @types/react-native-dotenv 라이브러리를 추가로 설치해줍니다.

babel.config.js 수정하기

그런 뒤, babel.config.js 파일에서 해당 값을 plugins 항목에 넣어줍니다.

module.exports = function () {
  return {
    ...,
    plugins: [
      [
        "module:react-native-dotenv",
        {
          moduleName: "react-native-dotenv",
        },
      ],
    ],
  };
};

.env 파일 추가하기

mode=development
HOSTNAME=http://localhost:8080

이제, 위 예시와 같이 env 파일을 추가해줍니다.

기존 캐쉬 제거하기

마지막으로 metro 혹은 expo에 저장되어 있는 캐쉬를 제거하여 새로운 파일로 빌드해, 서버를 실행해줍니다. 이 과정은 꼭 필요한 것은 아니지만, 제대로 실행되지 않을 때, 실행해주시면 됩니다.

// expo app 
expo r -c (expo)

// bare react native app
npm run start --reset-cache

실제 코드 상 확인하기

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";

export default function MainScreen() {
  console.log(
    `TCL ~ [Main.Screen.js] ~ line ~ 6 ~ process.env.mode`,
    process.env.mode
  ); // development
  return (
    <View style={styles.container}>
      <Text>Open up MainScreen.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

파일의 경로를 수정한 후, expo 혹은 metro 서버를 다시 실행해줍니다. 정상적으로 작동하는 것을 확인하실 수 있습니다.