React에서 .env로 환경변수 사용하기

React에서 .env 파일로 환경변수 사용하는 방법에 대해 알아보겠습니다.

React에서 .env로 환경변수 사용하기

• .env 파일을 프로젝트 루트에 위치시켜야 함
• 값을 따옴표로 감싸지 않으며, 띄어 쓰지 않고 붙여 씀
• 줄의 끝에 쉼표나 세미콜론을 붙이지 않음
• .gitignore 파일에 .env를 꼭 포함시켜 유출 방지
• .env 파일을 수정했다면, 개발 서버를 재시작하기

API_KEY = 1a2b3c <- 띄어쓰기 X
VITE_SECRET_KEY="thisIsSecret" <- 따옴표 X
REACT_APP_TOKEN=1234 <- O

CRA와 함꼐 사용하기

• CRA(Create React App)를 사용한 경우
• 변수명은 REACT_APP_으로 시작해아 함
• process.env.REACT_APP_으로 접근 가능

Vite와 함께 사용하기

• Vite를 사용한 경우
• 변수명은 VITE_로 시작해야 함
• import.meta.env.VITE_로 접근 가능

참고

React에서 .env 환경변수 사용하기

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

리액트 - Create react app (CRA)에서 .env 를 이용한 환경변수 설정 (캐시 버스터, 배포파일 관리)