(React) env 설정 ( 글로벌 변수)

env 설정의 활용

• ReactJS 프로젝트 내에서 사용할 글로벌 변수의 정의
• github 에 프로젝트를 업로드하고자 하는 경우
  -> .env 화일에 저장후 .gitignore 를 통해서 업로드에서 배제

인스톨

npm i --save-dev dotenv

 

.env 화일을 프로젝트의 root 디렉토리에 생성  (src  폴더 NG)

 

.env 화일내에 아래 샘플과 같이 정의 ( 반드시 REACT_APP_  로 시작해야 하고, 값에는 쿼테이션 불필요 )

REACT_APP_BASE_URL=http://localhost:8000
REACT_APP_API_KEY=YOUR-API-KEY

 

프로젝트내 사용법
1. 변수명을 재정의한 (예) variables.js 파일을 생성하여 export 선언

export const BASE_URL = process.env.REACT_APP_BASE_URL;
export const API_KEY = process.env.REACT_APP_API_KEY;

사용하는 js 쪽에서는 아래와 같이 import 하여 변수로써 사용

import { BASE_URL, API_KEY } from './variables'


 return (
    <div> {BASE_URL} </div>
    ...

 

2. 코드내 직접 사용

{process.env.REACT_APP_BASE_URL}