리액트 커스텀 환경변수 사용하기

https://create-react-app.dev/docs/adding-custom-environment-variables/

Adding Custom Environment Variables | Create React App

 

1. 개요

Create Recat App에서는 커스텀 환경변수를 추가하여 마치 local variable 처럼 접근하여 사용이 가능하다. 리액트에서는 기본적으로 NODE_ENV라는 환경변수가 정의되어 있으며 커스텀으로 사용하는 환경변수는 REACT_APP_ 으로 시작한다.

 

 

 

2. 환경변수를 정의하는법

환경변수를 정의하는 방법은 두가지가 있다

 

1. 쉘에서 커맨드로 직접정의

2. .env 파일에다가 정의

 

 

쉘에서 커맨드로 정의하는 법

OS나 쉘에 따라 각각 다르니 참고하길 바람

set "REACT_APP_NOT_SECRET_CODE=abcdef" && npm start //window cmd
($env:REACT_APP_NOT_SECRET_CODE = "abcdef") -and (npm start) // window powerShell
REACT_APP_NOT_SECRET_CODE=abcdef npm start // linux or macOS

 

.env파일에다가 정의하는 법

리액트 프로젝트의 루트 폴더에 .env파일을 만든 뒤 그 안에다가 아래와 같이 커스텀 환경변수를 정의하면 값이 정의된다.

REACT_APP_NOT_SECRET_CODE=abcdef

 

 

 

반응형

 

 

3. 값을 읽는법

 

리액트의 커스텀 환경변수는 빌드타임에서 값이 결정된다. 고로 런타임에서 직접적으로 값을 읽으면 안된다.

환경변수의 값을 읽으려면 process.env.환경변수이름 이런식으로 접근해야 한다

아래는 환경변수의 사용 예제이다

render() {
  return (
    <div>
      <small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small>
      <form>
        <input type="hidden" defaultValue={process.env.REACT_APP_NOT_SECRET_CODE} />
      </form>
    </div>
  );
}

 

 

3. HTML에서 환경변수 읽어오기

아래와 같은 방법으로 앞뒤로 %를 붙여주면 HTML에서도 커스텀 환경변수를 읽을 수 있다

<title>%REACT_APP_WEBSITE_NAME%</title>