[React] 환경변수 값 undefined 오류 원인

React에서는 환경변수를 .env 파일에 저장하여 사용한다.

해당 오류는 해당 환경변수를 찾지 못하여 undefined이 나오는 오류이다.

원인으로 대략 5가지를 생각해 볼 수 있다.

1. .env 파일이 root 폴더에 있는가?
2. 사용하고자 하는 환경변수가 "REACT_APP_"로 시작되는가?
3. 환경변수를 '(single quote) "(double quote)로 감싸진 않았는가?
4. 환경변수 줄바꿈시 ,나 ;을 사용하였는가 ?
5. .env 파일 수정 후 서버에 반영을 위해 재시작 하였는가?

보통 2번 케이스 SERVER_URL 이런식으로 지정해두어 오류가 발생한다.

리액트의 경우 환경 변수는 REACT_APP_{PARAM_NAME} 형식으로 Prefix 값이 지정되어 있다.

.env 파일에 REACT_APP_SERVER_URL=www.server.url 형식으로 저장 후 

// .env 환경변수 설정시
REACT_APP_SERVER_URL=www.server.url 

// js에서 환경변수 호출시
console.log(process.env.REACT_APP_SERVER_URL)

위와 같이 process.env.REACT_APP_SERVER_URL로 사용하여야한다.