React – React 시작하기 – 개발 환경 설정 – 4 – .env 설정 및 환경변수

작성자 wooah
React – React 시작하기 – 개발 환경 설정 – 4 – .env 설정 및 환경변수

React – React 시작하기 – 개발 환경 설정 – 4 – .env 설정 및 환경변수

안녕하세요 여러분! 😊
이번 시간에는 React에서 .env 파일을 이용해 환경변수(environment variable)를 설정하는 방법과 그 활용법에 대해 알아보겠습니다.

이건 마치 요리사들이 레시피마다 재료를 바꿔가며 요리를 준비하는 것과 같아요.
환경변수는 개발, 테스트, 배포 등 다양한 상황에 맞게 앱의 설정을 바꿔주는 역할을 해준답니다.

1. 환경변수란 무엇인가요?

환경변수는 말 그대로 **“환경에 따라 달라지는 값”**이에요.
예를 들어,

  • 개발 환경에서는 로컬 서버(http://localhost:3000)를,
  • 배포 환경에서는 실제 API 주소(https://api.mysite.com)를 사용하고 싶을 때

이럴 때 코드를 수정하지 않고 .env 파일만 바꿔주면 되니 정말 편리하겠죠?

2. React에서 .env 파일을 사용하는 이유

  • API 주소, 키 등의 민감한 정보를 코드에 직접 노출하지 않기 위해
  • 환경별 설정값을 분리해서 관리하기 위해 (dev/test/prod 등)
  • 배포 자동화 도구와 함께 활용하기 위해

💡 React 앱은 브라우저에서 실행되기 때문에, 환경변수를 노출하더라도 민감한 정보는 절대 담으면 안 돼요!

3. .env 파일 생성 및 위치

.env 파일은 프로젝트 루트 디렉터리에 만들어야 해요.

my-app/
├── .env
├── package.json
├── public/
└── src/

4. 환경변수 파일 예시

React에서는 환경변수를 무조건 REACT_APP_으로 시작해야 인식합니다!

REACT_APP_API_URL=https://api.example.com
REACT_APP_TITLE=나의 리액트 앱

❌ 이런 건 안됨

API_URL=https://api.example.com  # 인식하지 못함!

React는 보안상 이유로 REACT_APP_ prefix가 붙은 변수만 접근 가능하게 제한하고 있어요.

5. 환경변수 사용하는 법

function App() {
  return (
    <div>
      <h1>{process.env.REACT_APP_TITLE}</h1>
      <p>API 주소: {process.env.REACT_APP_API_URL}</p>
    </div>
  );
}

process.env.REACT_APP_XXX 형식으로 접근합니다.
JSX 안에서도 자유롭게 사용할 수 있어요!

6. 환경별 .env 파일 나누기

React는 다양한 환경에 따라 자동으로 .env 파일을 구분해 사용할 수 있도록 도와줘요.

파일명 설명
.env 기본값 (모든 환경 공통)
.env.development 개발 모드 전용 (npm start)
.env.production 배포 모드 전용 (npm run build)
.env.test 테스트 전용 (npm test)

예를 들어, 개발 중엔 로컬 API를, 배포에선 실서버 API를 쓰고 싶을 땐?

# .env.development
REACT_APP_API_URL=http://localhost:4000
# .env.production
REACT_APP_API_URL=https://api.mysite.com

React는 현재 환경을 process.env.NODE_ENV를 통해 판단해 적절한 파일을 적용해요.

7. 변경된 .env 적용 방법

.env 파일을 수정한 후에는 반드시 개발 서버를 재시작해야 반영돼요!

npm start

.env는 앱이 빌드되는 시점에 적용되므로, 변경 즉시 반영되지 않아요.

8. 실제 활용 예시

// src/config.js
const API_URL = process.env.REACT_APP_API_URL;

export default {
  API_URL,
};
// src/App.js
import config from './config';

function App() {
  return (
    <div>
      <p>현재 API 주소는: {config.API_URL}</p>
    </div>
  );
}

이렇게 환경변수를 별도의 설정 파일에 모아두면 재사용과 유지보수에도 매우 유리해요!

9. 환경변수를 Git에 노출하면 안 돼요!

.env 파일은 보통 민감한 정보를 포함하므로 Git에 업로드하지 않아야 해요.

# .gitignore
.env
.env.*

또한 API Key, 토큰 등 민감한 데이터는 .env에 쓰지 말고, 백엔드 서버에서 처리하도록 해야 안전합니다!

10. 주의할 점 요약

주의사항 설명
반드시 REACT_APP_으로 시작해야 함 그렇지 않으면 무시됩니다
수정 후 개발 서버 재시작 필수 실시간 반영되지 않아요
민감한 정보는 넣지 말 것 브라우저에서 누구나 볼 수 있어요
.env는 Git에 포함하지 않기 보안 위험 발생 가능
환경에 따라 파일을 나눠 사용하기 .env.production, .env.development 등 분리해서 관리

마무리하며

환경변수는 React 프로젝트를 더 유연하고 안전하게 관리할 수 있도록 도와주는 필수 요소입니다.
프로젝트가 커질수록 .env 파일 하나로 여러 환경을 정리해서 관리할 수 있다는 점은 큰 장점이죠!

React의 설정을 더 깊이 이해하고, 실무에서도 깔끔하게 프로젝트를 관리하고 싶은 분들께는 정말 중요한 주제였어요 😊

다음 글에서는 이제 본격적으로 JSX 문법의 기초 개념을 배워보며 React의 화면을 구성하는 방법을 알아보겠습니다. 함께 해주실 거죠? 🚀

답글 남기기