[React] 환경변수 사용하기

React 애플리케이션에서 환경 변수를 설정하고 사용하는 방법은 Create React App, Next.js 등의 프레임워크를 사용하고 있다면, dotenv 모듈을 직접 사용하지 않고도 환경 변수를 사용할 수 있습니다.

React에서 환경 변수를 설정하려면, 프로젝트 루트에 .env 파일을 만들고, 그 안에 REACT_APP_ 접두사로 시작하는 환경 변수를 설정하면 됩니다.

REACT_APP_API_URL=https://myapi.com
REACT_APP_SECRET=mysecretkey

그런 다음 애플리케이션에서 process.env.REACT_APP_API_URL 또는 process.env.REACT_APP_SECRET와 같이 접근할 수 있습니다.

console.log(process.env.REACT_APP_API_URL);
console.log(process.env.REACT_APP_SECRET);

이는 React 앱이 빌드될 때, webpack에 의해 process.env.REACT_APP_으로 시작하는 환경 변수들이 자동으로 주입되기 때문입니다.

중요한 점은, 이런 방식으로 설정한 환경 변수들은 빌드 시점에 정적으로 주입되므로, 환경 변수를 변경하려면 애플리케이션을 다시 빌드해야 한다는 것입니다.

또한, 클라이언트 사이드 코드에 환경 변수를 사용할 때는 민감한 정보가 노출되지 않도록 주의해야 합니다. REACT_APP_ 접두사로 시작하는 모든 환경 변수들은 브라우저에 노출되기 때문에, API 키나 비밀번호 등의 민감한 정보를 이런 방식으로 저장해서는 안 됩니다. 이런 민감한 정보는 서버 사이드에서 처리하거나, 외부에 노출되어도 괜찮은 퍼블릭 키 등으로 대체해야 합니다.