useEnv.js 커스텀 훅

useEnv.js 커스텀 훅: 쉽고 깔끔하게 환경 변수 사용하기

React 애플리케이션을 만들다 보면, API 서버 주소, 특정 기능의 활성화 여부(예: 개발용 목업 데이터 사용) 등 프로젝트 환경에 따라 달라지는 설정값들이 필요할 때가 많습니다. 이런 설정값들을 **환경 변수(Environment Variables)**라고 부르며, 보통 .env 파일 같은 곳에 저장해두고 사용합니다.

Vite와 같은 최신 프론트엔드 빌드 도구들은 이런 .env 파일의 변수들을 import.meta.env.VARIABLE_NAME 형태로 코드 내에서 접근할 수 있게 해줍니다. 예를 들어, .env 파일에 VITE_API_URL=https://api.example.com이라고 적어두면, 코드에서는 import.meta.env.VITE_API_URL로 이 값을 가져올 수 있습니다.

https://api.example.com

api.example.com

그런데, useEnv.js 같은 커스텀 훅은 왜 만들어서 사용할까요?

몇 가지 이유가 있습니다.

1. 가독성 및 사용 편의성 향상

환경 변수 이름은 보통 VITE_VERY_LONG_VARIABLE_NAME_FOR_SPECIFIC_FEATURE처럼 길어지기 쉽고, 단순히 문자열로 된 값을 가져오는 것 외에 추가적인 처리가 필요할 때도 있습니다.

예를 들어, 목업 데이터 사용 여부를 나타내는 환경 변수가 VITE_USE_MOCK_DATA이고, 이 값이 문자열 'true'일 때만 목업 데이터를 사용한다고 가정해 봅시다.

커스텀 훅 없이 여러 컴포넌트에서 사용한다면:

// ComponentA.jsx
const isMockMode = import.meta.env.VITE_USE_MOCK_DATA === 'true';
if (isMockMode) {
  // 목업 데이터 사용 로직
}

// ComponentB.jsx
const shouldUseMock = import.meta.env.VITE_USE_MOCK_DATA === 'true';
if (shouldUseMock) {
  // 또 다른 목업 데이터 사용 로직
}

위 코드처럼 매번 import.meta.env.VITE_USE_MOCK_DATA === 'true'라는 코드를 반복해야 합니다. 만약 환경 변수 이름이 바뀌거나, 'true'가 아니라 숫자 1로 비교해야 하는 상황이 온다면 모든 파일을 찾아 수정해야 하는 번거로움이 생깁니다.

useEnv 커스텀 훅을 사용한다면:

먼저 useEnv.js 파일을 만듭니다.

// src/hooks/useEnv.js
export const useEnv = () => {
  const isMock = import.meta.env.VITE_USE_MOCK_DATA === 'true';
  const apiUrl = import.meta.env.VITE_API_URL;
  // 필요하다면 다른 환경 변수나 가공된 값들을 추가

  return {
    isMock,    // boolean 값으로 바로 사용 가능
    apiUrl,    // API URL 문자열
  };
};

이제 컴포넌트에서는 이렇게 사용합니다.

// ComponentA.jsx
import { useEnv } from '../hooks/useEnv';

const MyComponent = () => {
  const { isMock, apiUrl } = useEnv(); // 훅 호출

  if (isMock) {
    console.log('목업 모드입니다. API URL:', apiUrl);
    // 목업 데이터 사용 로직
  }
  // ...
};

훨씬 간결하고, isMock이라는 의미 있는 이름으로 바로 사용할 수 있게 됩니다. 환경 변수 접근 로직이 변경되어도 useEnv.js 파일만 수정하면 되니 유지보수도 쉬워집니다.

2. 로직 중앙 집중화 및 재사용성 증대

환경 변수 값을 가져와서 특정 형태로 가공해야 하는 경우가 있습니다. 예를 들어, 특정 기능의 버전 정보를 환경 변수에서 가져와서 숫자 부분만 추출해야 한다거나, 여러 환경 변수를 조합해서 하나의 설정 객체를 만들어야 할 수도 있습니다.

이런 로직들을 각 컴포넌트에 흩뿌려 놓는 대신, useEnv 훅 안에 모아두면 코드가 훨씬 깔끔해지고, 해당 로직을 여러 컴포넌트에서 쉽게 재사용할 수 있습니다.

3. 타입 안정성 (TypeScript 사용 시)

TypeScript를 사용한다면, useEnv 훅의 반환 값에 타입을 명시하여 환경 변수 사용 시 타입 체크의 이점을 누릴 수 있습니다. 이렇게 하면 오타나 잘못된 사용으로 인한 런타임 에러를 줄일 수 있습니다.

// src/hooks/useEnv.ts (TypeScript 예시)
interface EnvironmentVariables {
  isMock: boolean;
  apiUrl: string | undefined; // API URL이 없을 수도 있음을 명시
  featureVersion: number;
}

export const useEnv = (): EnvironmentVariables => {
  const isMock = import.meta.env.VITE_USE_MOCK_DATA === 'true';
  const apiUrl = import.meta.env.VITE_API_URL;
  const featureVersion = parseInt(import.meta.env.VITE_FEATURE_VERSION || '1', 10);

  return {
    isMock,
    apiUrl,
    featureVersion,
  };
};

어떤 경우에 useEnv 같은 훅을 만들어서 사용할까요?

•

여러 컴포넌트에서 동일한 환경 변수를 반복적으로 사용할 때: 코드 중복을 줄이고 가독성을 높입니다.

•

환경 변수 값을 가져와 특정 형태로 가공해야 할 때: (예: 문자열 'true'를 boolean true로, 문자열 숫자를 실제 숫자로 변환) 관련 로직을 한 곳에 모아 관리합니다.

•

환경 변수와 관련된 로직이 복잡해질 가능성이 있을 때: 향후 유지보수를 용이하게 합니다.

•

애플리케이션 전반에서 사용되는 설정 값들을 체계적으로 관리하고 싶을 때: 설정 값 접근을 위한 단일 창구 역할을 합니다.

•

TypeScript 환경에서 환경 변수 사용에 타입 안정성을 더하고 싶을 때.

간단히 말해, useEnv 훅은 환경 변수를 좀 더 똑똑하고 깔끔하게, 그리고 안전하게 사용하기 위한 하나의 좋은 패턴이라고 생각하시면 됩니다. 프로젝트의 규모가 작거나 한두 곳에서만 환경 변수를 사용한다면 굳이 만들 필요는 없지만, 규모가 커지고 여러 곳에서 다양한 환경 변수를 참조하게 되면 그 유용성이 빛을 발하게 됩니다.

Made with Slashpage