[React] dotenv React에서 사용하기

env

개발할 때 개발팀만 알아야하는 프라이빗한 값들(git에 올라가면 안되는 값)이 있다.

예시) 라이브러리 API KEY, 포트, DB관련 정보 등,,

환경변수 파일을 외부에 만들어 API_KEY 등을 저장시켜 소스코드 내에 하드코딩하지 않고 사용하는 방법이다.

 

설치

npm install --save dotenv

 

.env

프로젝트 루트 경로에 .env 파일을 생성하고 작성한다.

REACT_APP_API_KEY=MY_API_KEY
REACT_APP_SERVER_PORT=3030
REACT_APP_DB_HOST=localhost
REACT_APP_DB_USER=root
REACT_APP_DB_PASSWORD=MY_DB_PASSWORD

React에서 .env를 사용하려면 변수명이 REACT_APP으로 시작하게 작성해야 한다.

 

dotenv 사용

import dotenv from 'dotenv'

dotenv.config()
console.log(process.env.REACT_APP_API_KEY)