// 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) {
// 또 다른 목업 데이터 사용 로직
}
// 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);
// 목업 데이터 사용 로직
}
// ...
};
// 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,
};
};