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

env 사용이유

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

.env 파일

.env 파일은 항상 프로젝트의 최상위 루트에 파일을 만들어 놓아야 합니다.

그리고 깃에 .env 파일이 올라가면 안 되기 때문에 꼭! gitIgnore에 .env를 꼭 추가시켜줍니다!!

gitIgnore
> .env

CRA에서 .env 사용하기

1. 환경변수 작성

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

REACT_APP_API_KEY = "API_KEY"

2. 환경변수 불러오기

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

process.env.REACT_APP_API_KEY

Vite에서 .env 사용하기

1. 환경변수 작성

.env 파일의 환경변수는 번들러에 따라서 설정이 다른데 vite에서 환경변수를 사용하기 위해서는
CRA와는 다르게 REACT_APP_이 아닌 VITE_를 앞에 작성을 해주어야 합니다.

VITE_API_KEY = "API_KEY"

2. 환경변수 불러오기

물론 변수 작성방법이 다르듯이 불러오는 방법도 다릅니다.
process.env.가 아닌 import.meta.env.로 접근을 해주어야 합니다.

import.meta.env.VITE_API_KEY