[TIL] React - 환경변수

환경변수는 .env라는 파일의 이름으로 저장하여 사용하게 됩니다. 직접적으로 값이 밝혀지면 안되는 경우, API키나 백 서버 주소 등등 보완을 위해서 설정하여서 사용합니다.

🎈 환경변수

.env.development 등, 다양한 이름으로 관리할 수 있습니다. 내부에는 값을 이런 식으로 작성하게 됩니다.

REACT_APP_TEST=hello

🎈 주의 사항

타입스크립트 환경에서 사용할 때, 적절한 사용법대로 하지 않는다면 환경변수가 잡히지 않는 경우가 있습니다. undified로 값이 나온다면 아래와 같은 방법으로 해결해보시길 추천합니다.

1. 빌드

환경변수가 사용되기 위해서는 빌드가 필요합니다.

2. REACT_APP

아래의 예시처럼 값이름 앞에 REACT_APP을 붙여야합니다.

REACT_APP_APIKEY = 어쩌고

3. react-app-env.d.ts

타입스크립트의 장점인 텍스트 편집기의 자동완성(자동 추론?)을 사용하기 위해서는 환경변수도 타입 설정을 해두어야 합니다. 타입스크립트 템플릿으로 cra를 사용했다면 아래와 같은 설정을 하면 됩니다.

└ react-app-env.d.ts

declare namespace NodeJS {
  interface ProcessEnv {
    NODE_ENV: 'development' | 'production' | 'test';
    REACT_APP_TEST: string;
 }

이렇게 설정해두고 process.env.환경변수이름 으로 사용하시면 됩니다.