[react]리액트 프로젝트에서 env 사용하기

env 란?

개발을 하다보면 포트, DB관련 정보, API_KEY등 개발자 혼자서 또는 팀만 알아야 하는 값 즉, git, 오픈소스에 올리면 안되는 값들이 있다. 이때 필요한 것이 dotenv 패키지 이며 환경변수 파일을 외부에 만들어 URL,포트, API_KEY등.. 을 저장시켜 소스코드 내에 하드코딩하지 않고 사용할수 있다.

create-react-app을 사용하여 프로젝트를 시작했다고 가정하고 글을 적겠다.

create-react-app으로 프로젝트를 시작하면 기본적으로 dotenv모듈이 같이 설치가 되므로 따로 설치를 하지 않아도 된다.
.env.local, .env.development, .env.test, .env.production 등 여러 종류가 있지만 이번 프로젝트에서는 .env.development 와 .env.production 를 사용하여 예시를 들겠다.

1. .env.development, .env.production 파일 생성

프로젝트 최상위루트에 .env.development, .env.production파일을 생성해준다.
그리고 파일안에 환경변수를 설정해주면 되는데 리액트에서는 REACTAPP으로 시작하여 네이밍을 해주어야 한다.

REACT_APP_SERVER_HOST = localhost:3000
REACT_APP_PASSWORD = dev123

2. package.json 설정

npm i env-cmd

서버 실행시 .env.development, .env.production 파일을 읽을수 있게 하려면 기본적으로 env-cmd를 설치해주어야 한다.

그리고 package.json에 다음과 같이 작성

"scripts": {
    "start": "env-cmd -f .env.development react-scripts start",
    "build": "env-cmd -f .env.production react-scripts build",
  },

이렇게 하면
npm start 실행시 .env.development 파일 실행
npm run build 실행시 .env.production 파일 실행

3. 환경변수 사용

JSX 작성시

fucntion App() {
    return (
      <div className="App">
          <h1>{process.env.REACT_APP_PASSWORD}</h1>
      </div>
    );
}

process.env.환경변수 이렇게 적어주면 된다.