[RN] React Native 환경변수 설정(env)

 

api 요청 시 API KEY 등 중요한 정보를 노출하지 않을 때나, 다양한 변수를 저장하기 위해서 환경변수를 설정하면 쉽게 관리할 수 있다.

react-native-dotenv

 

 

라이브러리를 설치하고 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: true,
          allowUndefined: true,
        },
      ],
    ],
  };
};

 

최상위에 .env 파일을 추가하고 API KEY를 넣어준다.

 

불러오는 방법은 아래 코드

import { API_KEY } from "@env";

const response = await axios.get(
	`${API_BASE_URL}/${API_KEY}/COOKRCP01/json/1/100`
);

 

 

만약 @env 모듈을 찾을 수 없다는 오류가 나오면 아래 명령어로 캐시를 리셋하거나 프로젝트를 껐다가 재실행 해보기

npm start -- --reset-cache 또는
expo start -c