[리액트] .env 환경 변수 추가하기

CRA 공식 문서

중요한 부분

Note: You must create custom environment variables beginning with REACTAPP. Any other variables except NODEENV will be ignored to avoid accidentally exposing a private key on the machine that could have the same name. Changing any environment variables will require you to restart the development server if it is running._
환경변수 추가하면 꼭 서버 끊었다가 다시 시작 npm start 하자!
나처럼 몽총이 같이 새로고침만 누르면서 헤매지 말구😂

These environment variables will be defined for you on process.env. For example, having an environment variable named REACT_APP_NOT_SECRET_CODE will be exposed in your JS as process.env.REACT_APP_NOT_SECRET_CODE.

There is also a built-in environment variable called NODE_ENV. You can read it from process.env.NODE_ENV. When you run npm start, it is always equal to 'development', when you run npm test it is always equal to 'test', and when you run npm run build to make a production bundle, it is always equal to 'production'. You cannot override NODE_ENV manually. This prevents developers from accidentally deploying a slow development build to production.

.env 파일을 프로젝트의 최상위 루트에 만들어준다.
그리고 저장하고 싶은 값을 변수에 담아준다.

이때 변수명은 반드시 REACT＿APP＿으로 시작되어야한다.
create-react-app에서는 보안이 필요한 환경변수의 유출을 미연에 방지하기 위해 REACTAPP으로 시작되지 않는 환경변수는 무시한다.

//.env
REACT_APP_GITHUB_AGORA_STATES_TOKEN = "환경 변수에 저장해 줄 코드"

변수를 사용하고 싶은 파일에서 import 없이 바로 사용할 수 있다.

process.env.REACT＿APP＿는 예약어이므로, 다른 이름은 사용하면 React가 인식하지 않는다.

// 환경 변수를 사용하는 파일
const key = process.env.REACT_APP_GITHUB_AGORA_STATES_TOKEN

/* 구조 분해할당으로 이렇게 사용할 수도 있다. */
const { REACT_APP_GITHUB_AGORA_STATES_TOKEN, NODE_ENV } = process.env;

process.env.NODE_ENV.

리액트에 내장되어 있는 환경변수이다.
npm start 로 시작하면 development 를,
npm test 를 하면 test를,
npm run build를 하면 production을 값으로 가진다.
수동으로 직접 조작(override), 값을 바꿀 수 없다.

아래와 같이 개발, 테스트 모드에서만 조건문이 실행되도록 하는 용도 등으로 사용할 수 있다.

 let token;
  if (NODE_ENV === "development" || NODE_ENV === "test") {
    token = REACT_APP_GITHUB_AGORA_STATES_TOKEN;
  }

참고 : [REACT] .env 를 이용한 변수선언 및 사용법