[React Native] 타입스크립트 환경에서 환경 변수(.env) 적용하기

[React Native] 타입스크립트 환경에서 환경 변수(.env) 적용하기

📖 들어가며

최근 React Native + TypeScript 로 간단한 어플을 만들면서 공부하던 도중에 환경 변수 (env)를 적용이 필요했는데,

그냥 React에서 사용하던 방법과 조금 다른 것 같아서 생소했습니다.

1. react-native-dotenv

react-native-dotenv는 React Native 환경에서 환경변수(env)를 적용할 수 있습니다.

터미널을 켜고 해당 명령어를 통해 라이브러리를 설치합니다.

npm i react-native-dotenv

또는

yarn add react-native-dotenv

그리고 타입스크립트 환경에서는 추가로 types를 설치해 줘야 타입스크립트 환경에서 사용할 수 있습니다.

npm install -D @types/react-native-dotenv

또는

yarn add -D @types/react-native-dotenv

2. babel.config.js 업데이트 하기

라이브러리를 설치 후에 babel.config.js 파일의 내용을 수정 해줘야 합니다.

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module:react-native-dotenv',
        {
          moduleName: '@env',
          path: '.env',
          blacklist: null,
          whitelist: null,
          safe: false,
          allowUndefined: true,
        },
      ],
    ],
  };
};

수정된 내용 안에 moduleName은 import 할 때 명시한 이름으로 가져올 수 있도록 설정한 것입니다.

import { ENV_VAR } from "@env"

moduleName을 따로 설정 안 할 시에는

import { ENV_VAR } from "react-native-dotenv"

반응형

3. .env 파일 생성

루트 디렉토리에 .env파일을 생성하고 사용 하고자 하는 환경 변수를 .env파일 안에 추가 해줍니다.

예시)

API_URL=https://yong-nyong.tistory.com

4. env.d.ts

타입스크립트 환경에서는 env.d.ts 파일을 생성하고 사용하고자 하는 환경 변수 타입을 지정 해야합니다.

해당 파일과 내용을 추가를 안 할 시, 환경 변수를 사용하려 할 때 해당 변수를 찾을 수 없다고 오류가 발생하게 됩니다.

declare module '@env' {
  export const API_URL: string;
}

5. 사용하기

이제 모든 셋팅은 끝났습니다.

사용 예시)

import { API_URL } from '@env';

export async function fetchData() {
  try {
    const data = await fetch(API_URL);
    const json = data.json();
    return json;
  } catch (error) {
    console.error(error);
    return error;
  }
}

📕 마무리

리액트 네이티브 + 타입스크립트 환경에서  react-native-dotenv를 통해서 환경변수(env) 파일을 적용해 보았습니다.