[TypeScript] TypeScript의 Enum타입에 대해 알아보자

1. enum이란?

enum은 열거형 타입으로, 이름이 있는 상수들의 집합을 정의합니다. 이는 문자열이나 숫자 값을 명확하게 관리하고, 코드에서 의미를 부여하는 데 사용됩니다.

 

2. enum의 기본 사용법

enum은 숫자 기반 열거형과 문자열 기반 열거형으로 나뉩니다.

1 숫자 열거형 (Numeric Enum)

숫자 열거형은 자동으로 0부터 시작하여 값이 1씩 증가합니다.

enum Direction {
  Up,    // 0
  Down,  // 1
  Left,  // 2
  Right, // 3
}

console.log(Direction.Up);    // 출력: 0
console.log(Direction.Down);  // 출력: 1
console.log(Direction[2]);    // 출력: "Left" (역방향 매핑)

 

2. 문자열 열거형 (String Enum)

문자열 열거형은 값으로 고정된 문자열을 가지며, 숫자 기반 열거형처럼 자동 증가하지 않습니다.

enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}

console.log(Direction.Up);    // 출력: "UP"
console.log(Direction["Down"]); // 출력: "DOWN"

 

 

3. enum 활용 예제

1. 상태 관리

enum은 애플리케이션 상태를 관리하거나 HTTP 상태 코드, 로딩 상태 등을 표현할 때 유용합니다.

enum Status {
  Pending = "PENDING",
  InProgress = "IN_PROGRESS",
  Completed = "COMPLETED",
  Failed = "FAILED",
}

function checkStatus(status: Status) {
  switch (status) {
    case Status.Pending:
      console.log("작업이 대기 중입니다.");
      break;
    case Status.InProgress:
      console.log("작업이 진행 중입니다.");
      break;
    case Status.Completed:
      console.log("작업이 완료되었습니다!");
      break;
    case Status.Failed:
      console.log("작업이 실패했습니다.");
      break;
  }
}

checkStatus(Status.InProgress); // 출력: "작업이 진행 중입니다."

 

2. 사용자 권한 관리

enum은 특정 권한 레벨을 나타낼 때 유용합니다. 

enum UserRole {
  Admin = "ADMIN",
  Editor = "EDITOR",
  Viewer = "VIEWER",
}

function getPermissions(role: UserRole): string[] {
  switch (role) {
    case UserRole.Admin:
      return ["read", "write", "delete"];
    case UserRole.Editor:
      return ["read", "write"];
    case UserRole.Viewer:
      return ["read"];
    default:
      return [];
  }
}

console.log(getPermissions(UserRole.Editor)); // 출력: ["read", "write"]

 

3. 폼 데이터 처리

enum은 폼 데이터의 옵션을 타입 안정성 있게 관리하는 데 유용합니다.

enum Gender {
  Male = "male",
  Female = "female",
  Other = "other",
}

interface UserForm {
  name: string;
  age: number;
  gender: Gender;
}

const user: UserForm = {
  name: "홍길동",
  age: 30,
  gender: Gender.Male,
};

console.log(user); // 출력: { name: '홍길동', age: 30, gender: 'male' }

 

 

---

문자열 리터럴 vs Enum 

 

특징	문자열 리터럴	열거형
가독성	단순하지만 문맥 부족	명확하고 의도 전달 가능
타입 안정성	제공됨, 하지만 문자열 입력 시 실수 가능	강력한 타입 안정성, 허용된 값만 사용 가능
확장성	어렵고 관리가 힘듦	새로운 값 추가 및 관리가 용이
런타임 오버헤드	없음	객체로 변환되어 약간의 오버헤드 발생
IDE 자동 완성	제한적	강력한 자동 완성과 탐색 기능 지원

 

 

Enum의 장점

1. 타입 안정성

• enum은 정의된 값만 허용하므로, 잘못된 값(오타, 부적절한 문자열 등)이 입력될 위험을 방지합니다.
• 컴파일러가 허용되지 않은 값을 즉시 감지하여 오류를 발생시키므로, 런타임 오류를 줄일 수 있습니다.

2. 의미 전달이 명확

• enum은 값에 이름을 부여하기 때문에 코드의 가독성과 의미 전달이 명확합니다.
• 특정 값을 표현하는 데 있어, 단순 문자열이나 숫자보다 더 많은 문맥 정보를 제공합니다.

3. 코드의 응집력

• 관련된 값들을 한 곳에 묶어 관리할 수 있어, 값이 분산되는 것을 방지합니다.
• 프로젝트에서 특정 도메인에만 관련된 상수를 체계적으로 관리할 수 있습니다.

4. IDE 지원

• enum을 사용하면 코드 작성 시 자동 완성 기능과 타입 추론을 통해 생산성을 높일 수 있습니다.
• enum 값 이름을 기억하지 못해도 IDE가 제안해 주기 때문에 실수를 줄일 수 있습니다.

 

Enum의 단점

1. 런타임 오버헤드

• enum은 컴파일 시 자바스크립트로 변환되며, 일반적으로 즉시 실행 함수(IIFE) 형태로 출력됩니다.
• 이는 런타임에서 추가적인 메모리와 성능 비용을 발생시킬 수 있으며, 불필요한 코드 크기를 증가시킬 수 있습니다.

2. 트리쉐이킹(Dead Code Elimination)에 대한 문제

• 일반적인 enum은 객체로 변환되므로, 일부 번들러(예: Webpack, Rollup)에서 사용되지 않는 enum 값이 제거되지 않을 수 있습니다.
• 트리쉐이킹(Dead Code Elimination)을 제대로 활용하려면 const enum 또는 as const를 사용하여 불필요한 코드 제거를 유도해야 합니다.