TypeScript 열거형(Enum) 제대로 이해하기 – 실무 예제로 배우기 (10강)

TypeScript 열거형(Enum) 제대로 이해하기 – 실무 예제로 배우기

TypeScript의 **열거형(Enum)**은 코드에서 **상수 값을 관리**할 때 매우 유용한 기능입니다. 열거형은 숫자나 문자열로 구성된 상수 집합을 정의할 수 있게 해 주며, 코드의 가독성 및 유지보수성을 크게 향상시킵니다. 이번 강의에서는 TypeScript의 열거형(Enum)을 실무 예제와 함께 마스터할 수 있도록 깊이 있게 설명하겠습니다.

열거형(Enum)란?

**열거형(Enum)**은 상수 값들을 **그룹화**하여 정의할 수 있는 특별한 타입입니다. 즉, 서로 관련이 있는 상수들을 묶어서 **가독성**과 **관리 용이성**을 높이는 데 사용됩니다. TypeScript에서는 숫자(Enum)와 문자열(Enum) 두 가지 형태의 열거형을 지원합니다.

숫자형 열거형(Enum)

**숫자형 열거형**은 열거형의 각 값이 자동으로 숫자로 매핑되는 형태입니다. TypeScript에서 열거형을 정의하면 첫 번째 값은 기본적으로 **0부터 시작**하고, 이후 값들은 이전 값에 1을 더한 값으로 자동 설정됩니다.

enum Direction {
  Up,
  Down,
  Left,
  Right
}

let move: Direction = Direction.Up;
console.log(move); // 0

위 예제에서 Direction 열거형은 **Up**, **Down**, **Left**, **Right**라는 네 가지 방향을 정의합니다. **Direction.Up**의 값은 **0**이고, **Direction.Down**은 **1**, **Direction.Left**는 **2**, **Direction.Right**는 **3**으로 자동 할당됩니다.

문자열형 열거형(Enum)

**문자열형 열거형**은 각 값에 명시적으로 문자열을 할당하여 사용할 수 있습니다. 이 방법은 숫자형 열거형에서의 자동 증가 방식이 아닌, **명확한 문자열 값을 제공**하여 코드를 더욱 이해하기 쉽게 만들어 줍니다.

enum Status {
  Active = "ACTIVE",
  Inactive = "INACTIVE",
  Pending = "PENDING"
}

let userStatus: Status = Status.Active;
console.log(userStatus); // "ACTIVE"

위 예제에서 **Status** 열거형은 각 상태를 **"ACTIVE"**, **"INACTIVE"**, **"PENDING"**으로 명시적으로 설정합니다. 따라서 **Status.Active**는 **"ACTIVE"**라는 문자열 값을 갖게 됩니다.

열거형(Enum)의 주요 특징

열거형은 여러 가지 유용한 기능을 제공합니다. TypeScript에서 열거형을 사용하면 **타입 안전성**을 보장하고, 코드의 가독성을 높일 수 있습니다. 열거형의 주요 특징은 다음과 같습니다:

명시적인 값 할당: 열거형의 각 값에 명시적으로 숫자나 문자열을 할당할 수 있습니다.
타입 안전성: 열거형을 사용하면 타입이 잘못 설정되는 오류를 예방할 수 있습니다.
자동 증가 기능: 숫자형 열거형에서는 첫 번째 값 이후 모든 값이 자동으로 증가합니다.
조합 가능: 숫자형 열거형을 비트 플래그로 사용할 수도 있습니다.

열거형(Enum) 활용 예제

열거형은 실무에서 **상수 값들을 그룹화**하고, 코드의 가독성을 높이는 데 매우 유용합니다. 다음은 실무에서 자주 사용되는 열거형 활용 예제를 소개합니다.

상태 관리에 열거형 사용

enum TaskStatus {
  NotStarted = "NOT_STARTED",
  InProgress = "IN_PROGRESS",
  Completed = "COMPLETED"
}

function getTaskStatus(status: TaskStatus): string {
  switch (status) {
    case TaskStatus.NotStarted:
      return "Task has not started yet.";
    case TaskStatus.InProgress:
      return "Task is in progress.";
    case TaskStatus.Completed:
      return "Task is completed.";
    default:
      return "Unknown status.";
  }
}

console.log(getTaskStatus(TaskStatus.InProgress)); // Task is in progress.

위 예제에서는 **작업의 상태(TaskStatus)**를 열거형으로 정의하고, 이를 바탕으로 상태별 메시지를 출력하는 함수 getTaskStatus를 작성하였습니다. 이처럼 열거형을 활용하면 상태 값이 변경되어도 코드 수정이 쉽고, **타입 안전성**도 보장할 수 있습니다.

비트 플래그로 열거형 사용하기

열거형은 **비트 플래그(Bitwise Flags)**로도 사용할 수 있습니다. 비트 플래그를 사용하면 여러 개의 값을 **조합**하여 하나의 숫자로 표현할 수 있습니다.

enum Permissions {
  Read = 1 << 0,  // 0001
  Write = 1 << 1, // 0010
  Execute = 1 << 2, // 0100
  Delete = 1 << 3  // 1000
}

let userPermissions: Permissions = Permissions.Read | Permissions.Write;
console.log(userPermissions); // 3 (0001 | 0010 = 0011)

위 예제에서는 **비트 연산자**를 사용하여 **읽기(Read)**, **쓰기(Write)**, **실행(Execute)**, **삭제(Delete)** 권한을 나타내는 값을 정의하였습니다. 이렇게 비트 플래그로 열거형을 사용하면 여러 권한을 하나의 숫자 값으로 **조합**하고, 이를 통해 효율적인 권한 관리가 가능합니다.

열거형(Enum)의 확장과 활용

열거형은 다른 타입과 결합하여 **확장**할 수 있습니다. 예를 들어, 열거형을 **객체**나 **배열**과 결합하여 더욱 복잡한 데이터 구조를 다룰 수 있습니다. TypeScript는 이처럼 다양한 방식으로 열거형을 활용할 수 있도록 도와줍니다.

배열과 객체에서 열거형 사용

enum Days {
  Monday = "MON",
  Tuesday = "TUE",
  Wednesday = "WED",
  Thursday = "THU",
  Friday = "FRI",
  Saturday = "SAT",
  Sunday = "SUN"
}

const workDays: Days[] = [Days.Monday, Days.Tuesday, Days.Wednesday, Days.Thursday, Days.Friday];
const weekendDays: Days[] = [Days.Saturday, Days.Sunday];

console.log(workDays); // ["MON", "TUE", "WED", "THU", "FRI"]

위 예제에서는 **요일(Days)**을 열거형으로 정의하고, **주중과 주말**을 배열로 관리합니다. 이처럼 열거형을 배열이나 객체와 결합하여 사용할 수 있습니다.

열거형(Enum) 선택 가이드

열거형은 언제 사용할지에 대해 고민할 때, 다음과 같은 상황에서 유용하게 활용될 수 있습니다:

상수 값의 그룹화: 관련 있는 상수 값들을 그룹화하여 관리하고 싶을 때.
상태 값 관리: 여러 상태 값 중에서 하나를 선택해야 할 때.
비트 플래그: 여러 개의 값을 **비트 연산**을 사용하여 하나의 값으로 조합해야 할 때.

마무리: TypeScript 열거형의 중요성

열거형(Enum)은 TypeScript에서 **타입 안전성**을 보장하고, 코드의 가독성을 높이는 중요한 도구입니다. 숫자형과 문자열형 열거형을 적절하게 활용하면 코드의 유지보수성이 좋아지고, 상수 값들을 효율적으로 관리할 수 있습니다. 비트 플래그나 배열, 객체와 결합하여 더 복잡한 데이터 구조를 다룰 때도 유용합니다.

열거형을 잘 활용하여 더 안전하고 효율적인 코드를 작성해보세요!

다음 강의에서는 TypeScript에서 제네릭(Generic)을 활용하여 재사용 가능한 타입을 정의하는 방법을 배워보겠습니다.

mystory55776 님의 블로그

TypeScript 열거형(Enum) 제대로 이해하기 – 실무 예제로 배우기 (10강)