[React] .env(환경 변수 관리) 정리

 

 

* 퉁이리 자료 출처 하단 기재, 좋은 자료가 많다!

 

✅ env

 

env는 API key, port, DB 등 민감한 정보를 환경변수에 담아 관리하는 방법이다.

 

1️⃣ env 주의사항

 

👌 root 폴더에 생성해야 한다.

 

 

root 폴더에 env 파일이 위치하지 않으면 정상적으로 작동하지 않는다.

 

 

👌 변수명은 반드시 "REACT_APP_"으로 시작해야 한다.

 

 

REACT_APP_변수명 = ㅇㅇㅇ

 

"REACT_APP_변수명" 형식이 아닐 시, React가 인식하지 못하여 정상적으로 작동하지 않는다.

 

 

🔹process.env.REACT_APP_ : 예약어

 

 

👌 .gitignore 에 env를 등록해야 한다.

 

 

.gitignore에 등록해주어야 git에 등록할 때 파일이 올라가지 않는다.

* 기본적으로 세팅은 되어 있으나 확인하는 것이 좋다.

 

 

2️⃣ env 우선순위

 

🔹 npm start : .evv.development.local, env.local, env.development, .env

🔹 npm run build : .env.production.local, env.local, env.production, .env

🔹 npm test : .env.test.local, .env.test, .env(note.env.local is missing)

 

왼쪽에 있을수록 우선순위가 높다.

 

 

3️⃣ env 사용방법

 

👌 root 폴더에 env 파일 생성

 

 

먼저 root 폴더(package 파일과 같은 레벨)에 env 파일을 생성해준다.

 

 

👌 환경변수 입력

 

REACT_APP_변수명 = ㅇㅇㅇ

 

key, value 형식으로 환경변수를 입력해준다.

주의해야 할 점은 key 앞에는 무조건 "REACT_APP_"을 붙여야 한다.

 

 

👌 환경변수 불러오기

 

 

소스코드에서 import 없이 {process.env.REACT_APP_변수명} 으로 불러오면 적용된다.

 

만약 env 의 값을 변경하여 적용하고 싶다면, 변경 후 server를 다시 실행시켜주어야 정상적으로 작용된다.

 

 

* 출처 : https://tooo1.tistory.com/582