React에서 .env 환경변수 사용하기

김민아·2022년 10월 2일

React에서의 환경변수 설정

외부 api에 접근하기 위해 token 등이 필요한 경우, 배포하지 않고 개발환경에만 적용할 수 있도록 환경 변수를 설정해야 한다. .env 파일을 가지고 process.env로 가져오는데, null값이라 나서 한참 헤맸다.

찾아보니, React에서는 환경변수 설정시 변수명에 REACT_APP_ 접두어가 꼭 필요하다고 한다. 예약어이니, 함부로 사용하지 않도록 주의!
~~알고 있다고 착각하지 말고, 필요할 땐 검색을 바로바로 하도록!~~

기존의 만들어 두었던 Todo앱을 React로 리팩토링하면서 notion api를 사용하려는데, 필요한 database id와 token을 .env 파일에 담는다.

.env

// .env 
// !!중요!! 홑, 쌍따옴표 없이!! 
REACT_APP_NOTION_TOKEN = secret_*******************************************
REACT_APP_NOTION_DATABASE_ID = ********-****-****-****-************

🛑 undefined로 출력될 때 체크리스트

홑 '' , 쌍 "" 따옴표로 감싸지 않는다.
줄 끝에 , , ; 를 붙이지 않는다.
```
REACT_APP_NOTION_TOKEN = secret_********
REACT_APP_NOTION_ID = ABCD1234
```
루트 경로에 있는지 확인한다.
중요!! 프론트 서버를 재시작한다!!!

2번과 3번의 대환장 컬래버로 한참을 헤맸다. 위에 ""로 예시를 적어두어서 5개월?만에 정정했다. 😇

.gitignore

꼭 .gitignore에 포함시켜 노출되지 않도록 주의한다.
~~안그럼 깃허브에서 연락옴 (보안경고)~~

# .gitignore
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

접근

따로 설치해야할 모듈은 없고 process.env.REACT_APP_...로 전역에서 접근할 수 있다.

const notionToken = process.env.REACT_APP_NOTION_TOKEN
const notionDatabaseID = process.env.REACT_APP_NOTION_DATABASE_ID

우선순위

환경변수는 npm script에 따라 자동으로 값이 지정된다고 한다.

npm start 시 (위 부터 우선 적용)
- .env.development.local
- .env.development
- .env.local
- .env
npm run build 시
- .env.production.local
- .env.production
- .env.local
- .env
npm test 시
- .env.test.local
- .env.test
- .env