[React] .env 파일 환경변수 설정하기

React 프로젝트를 진행하면서, .env 파일에 변수를 두고 사용할 일이 있었는데 아무리 해도 적용이 되지 않아서 엄청 애먹었던 시간이 있었다. 결과적으로 가장 중요한 것은 프로젝트를 재시작하는 것이다... 잊지 말자...ㅠㅠ

 

728x90

 

---

 

1. 파일 생성

프로젝트 루트 경로로 .env 파일을 생성한다.

 

2. 환경변수 설정

생성한 .env 파일에 환경변수를 설정해준다. 중요한 것은 React 환경에서는 'REACT_APP_'으로 시작되어야 한다. 그리고 띄어쓰기 없이 적어야한다. 설정이 끝났다면! React 프로젝트를 재시작!!! 그래야 환경변수 설정이 먹는다!!!

REACT_APP_PASSWORD=asdf1234

 

3. 환경변수 사용

'REACT_APP_'으로 설정해둔 환경변수를 불러온다. 

function Test() {
    const pw = process.env.REACT_APP_PASSWORD
    
    return (
        <>
        </>
    )
}