[React] 리액트에서 .env 환경변수 사용하기

env 사용하는 이유

개발을 하다보면 외부로 알려지면 안되는 API_KEY나 db관련 정보 등등 보안이 필요한 값들이 있는데
이러한 값들을 보안이나 유지보수를 용이하게 하기 위해 .env 파일에 환경변수로 만들어 변수를 꺼내와 사용하는 것

 

.env

.env 파일은 항상 프로젝트 최상위 루트에 만들어야함

 

그리고 깃에 .env 파일이 올라가면 안 되기 때문에 꼭! gitIgnore에 .env를 꼭 추가시키도록 함

.gitignore

 

CRA에서 .env 사용하기

1. 환경변수 작성

create-react-app에서는 보안이 필요한 환경변수의 외부 유출을 방지하기 위해 REACT_APP_으로 시작되지 않는 환경변수는 무시하기 때문에 항상 변수명은 REACT_APP_을 앞에 작성 후 변수이름을 만들어주어야 합니다.

"" 사용하지 않도록 주의하도록 합니다.

REACT_APP_HOST_API_KEY=http://localhost:3000

 

2. 환경변수 불러오기

 

리액트는 라이브러리나 컴포넌트 사용 시 import를 하고 나서 사용을 할 수 있지만,
.env에 등록된 변수는 별도의 import가 필요하지 않습니다.
전역 어디서든 process.env.로 작성해둔 환경변수를 가져와서 사용하면 됩니다.

export const HOST_API = process.env.REACT_APP_HOST_API_KEY || '';