React 컴포넌트에서 process.env.NODE_ENV와 DefinePlugin을 이용한 환경 변수 접근하기

리액트 컴포넌트에서 환경 변수에 접근하기

리액트 애플리케이션을 개발할 때 스테이징(staging) 또는 프로덕션(production) 환경에 따라 환경 변수의 값이 다르게 설정되는 것은 일반적입니다. 그러나 리액트 컴포넌트 내에서 환경 변수에 직접 접근하는 것은 조금 복잡할 수 있습니다. 이 블로그 포스트에서는 리액트 컴포넌트에서 환경 변수에 접근하는 두 가지 방법을 살펴보겠습니다.

방법 1: DefinePlugin 사용

리액트 컴포넌트 내에서 환경 변수에 접근하는 한 가지 방법은 웹팩(webpack)이 제공하는 DefinePlugin을 사용하는 것입니다. 이 플러그인은 코드 전체에서 사용할 수 있는 자유롭게 정의된 변수를 사용할 수 있게 해줍니다. 다음은 DefinePlugin을 사용하는 예시입니다:

new webpack.DefinePlugin({
  VERSION: JSON.stringify("5fa3b9"),
  BROWSER_SUPPORTS_HTML5: true,
  TWO: "1+1",
  "typeof window": JSON.stringify("object")
})

DefinePlugin을 사용하여 환경 변수를 정의하고 리액트 컴포넌트에서 직접 사용할 수 있습니다.

방법 2: create-react-app 사용

리액트 애플리케이션을 생성하기 위해 create-react-app을 사용한다면 운이 좋습니다! create-react-app은 자동으로 환경 변수에 접근할 수 있도록 설정합니다. 코드에서 추가적인 작업 없이 process.env.NODE_ENV 환경 변수를 직접 사용할 수 있습니다.

create-react-app은 또한 애플리케이션에서 REACT_APP_로 시작하는 환경 변수를 사용할 수 있게 해줍니다. 예를 들어, REACT_APP_SERVER_URL이라는 환경 변수를 가지고 있다면 다음과 같이 코드에서 사용할 수 있습니다:

fetch(process.env.REACT_APP_SERVER_URL)
  .then(response => response.json())
  .then(users => this.setState({ users }));

이 외에도 create-react-app은 리액트 앱에 사용자 정의 환경 변수를 정의할 수 있는 .env 파일을 지원합니다.

결론

이 블로그 포스트에서는 리액트 컴포넌트에서 환경 변수에 접근하는 두 가지 방법에 대해 살펴보았습니다. 웹팩이 제공하는 DefinePlugin을 사용하면 코드 내에서 환경 변수를 정의하고 사용할 수 있습니다.

create-react-app을 사용한다면 환경 변수에 접근하는 것이 더욱 쉽습니다. process.env 객체를 사용하여 환경 변수에 직접 접근할 수 있으며, create-react-app은 사용자 정의 환경 변수를 지원합니다.

DefinePlugin이나 create-react-app을 사용하든지, 리액트 컴포넌트에서 환경 변수에 접근하는 것은 서로 다른 환경에서 다른 설정을 관리하기 위해 꼭 필요합니다.

리액트 애플리케이션에서 환경 변수를 사용하는 방법에 대한 자세한 내용은 create-react-app 문서를 참조하세요.

참고 자료 : 

reactjs