react 에서 dotenv로 환경변수 사용하기

구글이나 깃헙의 API를 사용하려고 할 때 발급받은 클라이언트 Id를 깃헙에 유출시키지 않기 위해 dotenv를 이용했었다.
리액트에서는 사용방법이 달라서 기록해봤다.

npm install --save dotenv

설치

//.env
REACT_APP_MAPS_CLIENTID=clientId

리액트에서는 환경변수를 사용할 때 env 파일에서
반드시 변수명 앞에 REACT_APP 을 붙여야 한다.

.gitignore에 .env를 작성하는것을 잊지말자

사용할 때는 환경변수를 사용하고자 하는 파일 상단에서 import나 require를 한 뒤에
환경변수 값을 사용할 위치에서 process.env.환경변수명 으로 사용하면 된다.

require("dotenv").config();
// import dotenv from "dotenv";
// dotenv.config();

require를 사용하려면 위처럼 한줄만 작성해도 되고,
import를 사용하려면 주석처리한 두 줄을 작성하면 된다.

const ClientId = process.env.REACT_APP_MAPS_CLIENT;

위는 사용 예시