타입스크립트의 enum은 언제 사용하면 좋을까?

1. 역방향 매핑

2. 예시

 

 

enum이란?

타입스크립트의 고급 타입으로,. 쉽게 말하자면 특정한 상수들이 열거되어 있는 변수이다.

enum은 타입스크립트에서 자체적으로 구현하는 기능이다.

 

 

enum의 역방향 매핑이란?

역방향 매핑이란, enum에서 숫자 값을 통해 원래의 enum 키를 찾을 수 있는 기능을 의미한다.
즉, enum의 숫자 값을 사용하여 해당 값에 매핑된 키를 얻을 수 있다.

  enum StatusCode {
    Success = 200,
    NotFound = 404,
    Error = 500,
  }


  console.log(StatusCode[404]); //NotFound
  console.log(StatusCode["404"]); // NotFound
  console.log(StatusCode["Error"]); // 500
  console.log(StatusCode.Error); // 500

정방향 매핑 (Forward Mapping)

enum 키 → 값(value)

console.log(Direction.Up);  // 1
console.log(Direction.Down);  // 2

 

역방향 매핑 (Reverse Mapping)

console.log(Direction[1]);  // "Up"
console.log(Direction[2]);  // "Down"

여기서 Direction[1]은 "Up"을 반환하는데,
이는 TypeScript가 내부적으로 숫자 값(1)을 통해 원래의 enum 키("Up")를 추론할 수 있도록 자동 매핑했기 때문이다.

 

역방향 매핑이 가능한 이유

 

- TypeScript의 숫자형 enum은 숫자 값과 키를 서로 연결하는 객체(Object) 형태로 변환된다.

var Direction;
(function (Direction) {
    Direction[Direction["Up"] = 1] = "Up";
    Direction[Direction["Down"] = 2] = "Down";
    Direction[Direction["Left"] = 3] = "Left";
    Direction[Direction["Right"] = 4] = "Right";
})(Direction || (Direction = {}));

console.log(Direction); 
// {
//   '1': 'Up',
//   '2': 'Down',
//   '3': 'Left',
//   '4': 'Right',
//   Up: 1,
//   Down: 2,
//   Left: 3,
//   Right: 4
// }

 

enum Status {
  Success = "SUCCESS",
  Failure = "FAILURE",
}

console.log(Status.Success);  // "SUCCESS"
console.log(Status["SUCCESS"]);  // ❌ undefined

 

왜 문자열은 역방향 매핑이 불가능할까?

1. 숫자형 enum은 숫자로 키를 조회하는 것이 자연스럽고 효율적

• TypeScript는 enum을 내부적으로 객체처럼 만들면서 숫자 <-> 키의 양방향 매핑을 자동 생성한다.
• 이는 JavaScript에서 배열처럼 동작할 수 있도록 설계된 것이라 볼 수 있다.(배열에서 arr[0]을 조회하는 것처럼 enum[1]도 가능하게 됨.)

1. 문자열 enum은 단순한 문자열 값이므로 역방향 매핑이 불가하다.🫠

• JavaScript 객체에서 문자열 값은 역방향 참조가 자동으로 생성되지 않음.
• "SUCCESS" 같은 문자열 값은 단순한 데이터일 뿐, 이를 통해 원래의 키("Success")를 추론할 수 있는 메커니즘이 없음.
• 즉, 문자열 enum은 단방향 매핑만 가능하고, 역방향 조회가 불가능.

 

 

그래서 언제 사용하면 좋을까?

역방향 매핑이라는 특별한 성격이 있으니, 나는  어떠한 상수값등이 특정한 값이라고 의미를 부여하고 싶을 때 사용하자라는 생각이 들었다.

그에 대한 개선 사례

❌ 개선 전

1. DB에서 product의 카테고리 값은 유저가 중복으로 설정 가능하며, "0/1/2" 형태로 응답이 내려온다. (단일 선택 시 "0" 같은 단일 문자열로 전달)
2.  각각의 숫자 문자열은 특정 카테고리를 의미하는 컨벤션을 따른다.
   - "0" → 식당(FOOD)
   - "1" → 카페(CAFE)
   - "2" → 주류(ALCOHOL)
   - ... (생략)
3. 프론트에서는 이를 객체로 관리하여, 인덱스 기반으로 카테고리 아이콘과 사용자에게 표시할 텍스트로 변환하고있다.

 

 

export const categoryEng = ['FOOD', 'CAFE','ALCOHOL','CULTURE','STAY','SHOP','etc.'];

const categorySplit =
    category && category.length > 1 ? category.split('/') : [category];

 //category 타입이 null or string;
  const categoryIndex = categorySplit.map((item) => {
    const index = parseInt(item, 10);
    return index >= 0 && index < categoryEng.length ? (
      <div>{categoryEng[index]}</div>
    ) : null;
  });

 

• categoryEng의 index → DB에서 내려주는 값
• categoryEng의 value → 사용자에게 보여줄 텍스트

 

✅ 기존 코드의 문제점

1. categoryEng[index]를 직접 조회에서
   • index가 categoryEng 배열의 길이를 초과하는 경우를 체크해야하고 (런타임에서 오류가..)
   • index 값이 올바른 범위인지 직접 검사해야 한다.
2. 문자열을 직접 split('/') 하여 변환하는 과정에서
   • category의 값이 없을 때도 .split('/')을 호출할 수 있어 예외가 발생할 가능성이 있음. 
   • 그래서 직접 이를 걸러주는 조건문을 써야한다.

 

즉,  index 값이 categoryEng 배열과 연관성이 명확하지 않았고, TypeScript의 타입 안전성을 활용하지 않았다. 

 

✅ 기존의 카테고리의 숫자를  의미 있는 이름을 사용하고 싶어, enum으로 개선했다.

 enum Category {
  Food = 0,
  Cafe = 1,
  Alcohol = 2,
  ...
  ...
}

 
 const convertCategory = (category: string) => {
    if (!category) return null;

    const categorySplit = category.split('/').map((item) => {
      const index = parseInt(item, 10);

      // 역방향 매핑을 사용하여 enum 키 얻기
      const categoryKey = Category[index] as keyof typeof Category;

      return categoryKey in Category ? (
        <div>{Category[Category[categoryKey]]}</div>
      ) : null;
    });

    return categorySplit;
  };

 

• Category[index]를 활용하면 존재하지 않는 값일 경우 자동으로 undefined 처리.
• enum을 활용하여 index 범위를 강제할 수 있다.