React에서 .env 사용

axios를 모듈화 하기 이전 .env를 통해 요청 url을 관리하려고 했다.

 

.env 파일은 최상위 root에 존재해야 한다.

즉, pakage.json, .gitignore와 같은 위치에 존재해야 한다.

 

리액트에서 .env 파일을 사용할 때 주의할 점이 있는데 변수명 앞에 REACT_APP_이 꼭 붙어야 한다는 점이다.

REACT_APP_이 붙어있지 않다면 해당 변수를 무시하기 때문에 사용할 수 없다.

create-react-app에서는 보안이 필요한 환경변수의 외부 유출을 방지하기 위해 이렇게 처리한다고 한다.

 

이 환경변수를 컴포넌트에서 사용할때는 import 를 통해 사용하는 것이 아닌 아래와 같은 코드로 사용한다.

const api_url = process.env.REACT_APP_URL;

 

 

.env 파일은 환경변수를 작성하는 만큼 파일이 git에 올라가면 안되기 때문에 .gitignore에 추가해야 한다. 꼭!!!!!!

 

 

참고 블로그

https://shape-coding.tistory.com/entry/React-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C-env-%ED%99%98%EA%B2%BD%EB%B3%80%EC%88%98-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

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