[React] dotenv(.env) 로 환경변수 관리하기

dotenv(.env) 💻

React에서 .env 파일을 사용하면, 애플리케이션에서 환경변수를 설정할 수 있습니다. .env 파일은 React 프로젝트 루트 디렉토리에 위치하며, 환경에 따라 다른 변수값을 설정할 수 있습니다.

.env 파일은 REACTAPP 접두사가 붙은 변수만 인식합니다. 이유는 React에서 보안상의 이유로 환경변수를 자동으로 로딩할 때, 이 접두사가 없는 변수를 무시하기 때문입니다.

.env 파일에 변수를 설정하는 방법은 다음과 같습니다.

REACT_APP_API_KEY=abcdefg12345
REACT_APP_API_URL=http://localhost:3000/api

이렇게 설정된 환경변수는 process.env를 통해 사용할 수 있습니다.

예시 🍪

import React from 'react';

const Example = () => {
  const apiKey = process.env.REACT_APP_API_KEY;
  const apiUrl = process.env.REACT_APP_API_URL;

  return (
    <>
      <div>API Key: {apiKey}</div>
      <div>API URL: {apiUrl}</div>
    </>
  );
};

export default Example;

위 예시에서는 .env 파일에 설정된 REACT_APP_API_KEY와 REACT_APP_API_URL 변수를 process.env를 통해 불러옵니다. 이를 화면에 출력합니다.

주의할 점 😡

.env 파일은 커밋하지 않는 것이 좋습니다.
.env 파일에 저장된 환경변수는 애플리케이션 코드에서 직접적으로 사용되는 비밀번호와 같은 중요한 값들이 있을 수 있기 때문입니다.
따라서 .env 파일은 .gitignore 파일에 추가하여 Git에서 제외하는 것이 좋습니다.