process.env

React도 여타 node.js를 사용한 개발과 같이, process.env 오브젝트를 통해 현재 node.js가 실행되고 있는 환경변수를 가져올 수 있다.

한편, create-react-app을 통해 제작한 앱의 경우에는 .env을 지원한다.

.env가 항상 불러오는 전체 용도이고,

.env.development는 npm start를 통해 실행할 경우 불러오는 경우이며,

.env.production는 npm run build를 실행할 경우 빌드 타임에 env를 가져오는 방식이다.

.env 문법

# .env.production
REACT_APP_API_URL="https://some-api.test.com"

# .env.development
REACT_APP_API_URL="http://localhost:8000"

위와 같이 REACT_APP_ 로 사전 정의된 이름으로 시작해야, React에서는 "아 이게 react용이구나" 라고 자체적으로 관리하는 환경변수로 인식한다.

한편, 위 변수 이름은 process.env.REACT_APP_API_URL 와 같이 풀네임으로 사용해야 해당 값을 불러올 수 있다.

또한, 해당 환경 변수값은 코드상에서는 process.env.~~ 형식이지만 npm start등 React 빌드가 진행된 이후에는 const value로 동작한다.

React에서 API 주소 with Axios

import axios from "axios";

// axios.defaults.baseURL = "http://localhost:8000";
axios.defaults.baseURL = process.env.REACT_APP_API_URL;

따라서, API 주소를 환경에 따라 바꾸기 위해서는 위처럼 고정된 string으로 넣는 대신, process.env.REACT_APP_API_URL로 넣어주면 해결된다.