[React] 환경변수 / 공통변수 사용하는 방법

 

방법1

---

src 폴더 아래 js 파일을 하나 생성합니다.

config.js

export const ELASTIC_URL = '10.20.30.40:9200';
export const ES_INDEX_NAME = 'img_text_data';
export const ES_DOC_TYPE = '_doc'

 

사용 방법

import * as config from './config';

// ..

function someMethod(){
	let host = config.ELASTIC_URL;	// 이렇게 사용
}

 

이 방법이 좀 간단합니다.

 

아래의 방법2는 개발환경/배포환경에 따라 다른 변수가 필요할 때 유용합니다.

 

방법2

---

create-react-app 으로 프로젝트를 생성했다고 가정하고

프로젝트 root 에 파일을 만듭니다.

.env.development
.env.production

 

.env.development 파일의 내용은

REACT_APP_DB_HOST=192.168.1.244:9200

 

.env.production 파일의 내용은

REACT_APP_DB_HOST=10.12.1.52:9200

 

여기에서 중요한것.
각 파일에 변수를 정할 때 앞에는 REACT_APP_ 를 붙혀야 합니다.

npm start 로 하면 .env.development 파일의 내용을 사용하고

npm run build 로 하면 .env.production 파일의 내용을 사용합니다.

 

사용은 process.env. 을 붙히고 사용합니다.

<p>{process.env.REACT_APP_DB_HOST}</p>

 

.env.--- 파일의 내용을 수정하면 npm 으로 다시 시작해야합니다.

 

---

추가로 
.env.test 파일도 있고 이 파일은 
npm test 로 실행했을 경우 사용합니다.