🧙‍♂️ 마법의 문자열/숫자 남용: 예측 불가능한 코드와 유지보수의 덫

Why Wrong?

How to Fix?

// components/UserProfile.jsx
import React from 'react';

function UserProfile({ status, userType }) {
  let statusMessage = '';
  if (status === 1) { // 1이 뭘까? 'active'를 의미하는 건가?
    statusMessage = '사용 중';
  } else if (status === 0) { // 0은? 'inactive'?
    statusMessage = '비활성';
  } else {
    statusMessage = '알 수 없음';
  }

  const getProfileStyle = () => {
    // 하드코딩된 값들
    if (userType === 'admin') {
      return { border: '2px solid red', padding: '10px' };
    } else if (userType === 'guest') {
      return { border: '1px solid gray', opacity: 0.7 }; // 0.7의 의미는?
    }
    return {};
  };

  return (
    <div className={`user-profile ${userType}`}>
      <h3>사용자 프로필</h3>
      <p>상태: {statusMessage}</p>
      <div style={getProfileStyle()}>
        <p>타입: {userType}</p>
      </div>
      {/* 다른 프로필 정보들 */}
    </div>
  );
}

export default UserProfile;

// constants/user.js
export const USER_STATUS = {
  ACTIVE: 1,
  INACTIVE: 0,
  UNKNOWN: -1, // 명확한 기본값 추가
};

export const USER_TYPE = {
  ADMIN: 'admin',
  GUEST: 'guest',
  REGULAR: 'regular',
};

// components/UserProfile.jsx
import React from 'react';
import { USER_STATUS, USER_TYPE } from '../constants/user'; // 상수 임포트

function UserProfile({ status, userType }) {
  let statusMessage = '';
  switch (status) {
    case USER_STATUS.ACTIVE:
      statusMessage = '사용 중';
      break;
    case USER_STATUS.INACTIVE:
      statusMessage = '비활성';
      break;
    default:
      statusMessage = '알 수 없음';
  }

  const getProfileStyle = () => {
    switch (userType) {
      case USER_TYPE.ADMIN:
        return { border: '2px solid red', padding: '10px' };
      case USER_TYPE.GUEST:
        return { border: '1px solid gray', opacity: 0.7 }; // 0.7은 여전히 마법의 숫자일 수 있으므로 필요시 상수로 추출
      default:
        return {};
    }
  };

  return (
    <div className={`user-profile ${userType}`}>
      <h3>사용자 프로필</h3>
      <p>상태: {statusMessage}</p>
      <div style={getProfileStyle()}>
        <p>타입: {userType}</p>
      </div>
      {/* 다른 프로필 정보들 */}
    </div>
  );
}

export default UserProfile;

// TypeScript 환경이라면 다음과 같이 타입 안정성을 더 높일 수 있습니다.
/*
// types/user.ts
export enum UserStatus {
  ACTIVE = 1,
  INACTIVE = 0,
  UNKNOWN = -1,
}

export type UserType = 'admin' | 'guest' | 'regular';

// components/UserProfile.tsx
import React from 'react';
import { UserStatus, UserType } from '../types/user';

interface UserProfileProps {
  status: UserStatus;
  userType: UserType;
}

function UserProfile({ status, userType }: UserProfileProps) {
  let statusMessage: string;
  switch (status) {
    case UserStatus.ACTIVE:
      statusMessage = '사용 중';
      break;
    case UserStatus.INACTIVE:
      statusMessage = '비활성';
      break;
    default:
      statusMessage = '알 수 없음';
  }

  const getProfileStyle = () => {
    switch (userType) {
      case 'admin': // TypeScript의 리터럴 타입 추론을 활용
        return { border: '2px solid red', padding: '10px' };
      case 'guest':
        return { border: '1px solid gray', opacity: 0.7 };
      default:
        return {};
    }
  };

  return (
    <div className={`user-profile ${userType}`}>
      <h3>사용자 프로필</h3>
      <p>상태: {statusMessage}</p>
      <div style={getProfileStyle()}>
        <p>타입: {userType}</p>
      </div>
    </div>
  );
}

export default UserProfile;
*/

You Might Also Like