React .env 사용법

node.js 환경에서는 비밀값으로 가져가야 하는 데이터들은 .env 파일에 넣어두고 process.env 객체를 불러와 사용합니다. 마찬가지로 React에서도 process.env 객체에 접근해 데이터를 시크릿하게 관리할 수 있습니다.

React .env 사용법

 

우선 .env 파일의 위치는 메인 디렉토리 하위에 위치시킵니다.

.
├── public
├── README.md
├── src
├── node_modules
├── package.json
├── package-lock.json
├── .gitignore
└── .env

 

생성한 .env 파일에 시크릿하게 관리해야 할 정보들을 입력합니다. 이때 주의하셔야 될 점은 변수명에 REACT_APP_을 무조건 붙여줘야 합니다. 이거때문에 몇시간 동안 삽질했습니다.

REACT_APP_DATA = secretdata

 

 

 

 

React .env 사용

 

React 앱에서는 node.js 환경과 동일하게 사용하시면 됩니다. 다만 node.js와 같이 dotenv 모듈을 설치/import 해오지 않아도 바로 사용할 수 있습니다.

<Container>
	secretData = {process.env.REACT_APP_DATA}
</Container>

 

REACT_APP_을 포함한 데이터를 담은 .env 파일을 적용하기 위해서는 현재 작동중인 dev server를 다시 시작해야 정상적으로 반영됩니다.