[React] .env file 환경변수, 공통변수

전역적으로 사용되는 불변 변수를 선언하고 싶다면

.env 파일을 이용해 환경변수를 생성하면 된다.

프로젝트 root 경로에 아래 파일 생성하고

.env.development

.env.production

변수를 선언할 때 REACT_APP_ 을 접두어로 붙여서 환경변수를 선언한다.

REACT_APP_TS_INDEX = SITE09106
REACT_APP_TS_SITE = SITE09106

불러올 때는 별도의 import 처리 없이 어디서든 다음과 같이 불러온다.

    const tsIndex = process.env.REACT_APP_TS_INDEX;

process.env.REACT＿APP＿는 예약어이므로, 다른 이름을 사용하면 읽어올 수 없다.

또한 process.env는 실행시 로드되기 때문에 .env의 설정을 바꾸게 되면 React 프로젝트를 다시 구동해야된다.

.env 파일명에 따른 호출

.env : 기본
.env.local : test환경 외에 모든 환경에서 로드됨
.env.development : 개발 환경 / npm start로 실행할 때
.env.test : 테스트 환경 / npm test로 실행할 때
.env.production : 배포 환경 / npm run build로 실행할 때