[TypeScript] Enum 타입

ttining·2025년 3월 19일

🎯 Enum 타입

  • Enum(열거형)은 여러 개의 관련된 값을 하나의 타입으로 묶어 관리할 수 있도록 해주는 TypeScript의 기능이다.
  • 각 값에 의미 있는 이름을 부여하여 코드의 가독성을 높이고, 명확성을 제공한다.
  • TypeScript의 Enum은 컴파일 후에도 사라지지 않고, 자바스크립트의 객체로 변환되어 런타임에도 참조할 수 있다.

1️⃣ 숫자형 Enum

숫자형 Enum은 각 멤버의 값으로 숫자가 자동 또는 수동으로 할당된다.

📌 기본적인 숫자형 Enum

enum Role {
  ADMIN = 0,
  USER = 1,
  GUEST = 2
}
  • 자동으로 0부터 할당되기 때문에 생략 가능하다.
  • 만약, 첫 번째 항목을 10으로 설정했다면 자동으로 11번이 할당된다. (중간부터 설정하는 것도 가능)
enum Role {
  ADMIN,
  USER,
  GUEST
}

const user1 = {
  name: "띠닝",
  role: Role.ADMIN, // 0번 - 관리자
};
const user2 = {
  name: "홍길동",
  role: Role.USER, // 1번 - 일반 유저
};
const user3 = {
  name: "아무개",
  role: Role.GUEST, // 2번 - 게스트
};

console.log(user1, user2, user3);
// { name: '띠닝', role: 0 }
// { name: '홍길동', role: 1 }
// { name: '아무개', role: 2 }
  • 위와 같이 ADMIN부터 자동으로 0이 할당되며, 이후 값은 1씩 증가한다.

📌 초기 값 설정 및 자동 증가

첫 번째 값을 명시적으로 지정하면, 이후 값은 자동 증가한다.

enum Status {
  PENDING = 3, // 명시적으로 3 설정
  APPROVED, // 4 (자동 증가)
  REJECTED // 5 (자동 증가)
}

console.log(Status.APPROVED); // 4
console.log(Status.REJECTED); // 5

📌 특정 값 지정 (연속되지 않은 값)

각 멤버에 특정한 값을 수동으로 지정할 수도 있다.

enum ErrorCode {
  NOT_FOUND = 404,
  UNAUTHORIZED = 401,
  FORBIDDEN = 403
}

console.log(ErrorCode.NOT_FOUND); // 404
console.log(ErrorCode.UNAUTHORIZED); // 401

✨ 숫자형 Enum 사용

숫자로 된 상태 코드나 역할을 직관적으로 표현할 수 있다.




2️⃣ 문자형 Enum

문자형 Enum은 각 멤버의 값으로 문자열을 할당하는 방식이다.
숫자형 Enum과 달리 자동 증가가 적용되지 않으며, 직접 값을 명시해야 한다.

📌 기본적인 문자형 Enum

enum Direction {
  UP = "UP",
  DOWN = "DOWN",
  LEFT = "LEFT",
  RIGHT = "RIGHT"
}

console.log(Direction.UP); // "UP"
console.log(Direction.LEFT); // "LEFT"

📌 문자열을 활용한 설정 값 관리

문자형 Enum은 API 요형 타입, 상태 값 등을 표현할 때 유용하다.

enum RequestType {
  GET = "GET",
  POST = "POST",
  PUT = "PUT",
  DELETE = "DELETE"
}

function sendRequest(type: RequestType) {
  console.log(`요청 방식: ${type}`);
}

sendRequest(RequestType.GET); // "요청 방식: GET"
sendRequest(RequestType.POST); // "요청 방식: POST"

✨ 문자형 Enum 사용

명확한 문자열 값을 사용할 경우, 디버깅이 쉬워지고 코드의 의미가 분명해진다.




3️⃣ const enum

const enum은 일반 Enum과 달리 컴파일 후 자바스크립트 객체로 변환되지 않고, 값 자체로 인라인 처리된다.
즉, 불필요한 코드 생성을 방지하여 성능을 최적화할 수 있다.

📌 사용 예시

const enum Size {
  SMALL = "S",
  MEDIUM = "M",
  LARGE = "L"
}

console.log(Size.SMALL); // "S"

컴파일 후, 해당 Enum은 아래 코드처럼 직접 문자열 값으로 변환된다.

console.log("S");

const enum은 코드 크기를 줄이고 실행 속도를 개선하는 데 도움이 된다.




Enum 🆚 Union Type

문자열 값을 다룰 때는 Enum 대신 Union Type을 사용하는 것도 고려할 수 있다.

📌 Union Type을 사용한 예시

type Direction = "UP" | "DOWN" | "LEFT" | "RIGHT";

function move(dir: Direction) {
  console.log(`이동 방향: ${dir}`);
}

move("UP"); // ✅ 정상 동작
move("DOWN"); // ✅ 정상 동작
// move("JUMP"); // ❌ 오류 발생 (허용되지 않은 값)
  • Union Type은 별도의 객체 변환 없이 바로 타입 체크가 가능하며, 트리쉐이킹(tree shaking)에 유리하다.
  • Enum은 런타임에도 접근할 필요가 있는 경우 사용하면 좋다.



🎯 정리

구분숫자형 Enum문자형 Enumconst enum
값 할당자동 증가 가능직접 지정 필요직접 지정 필요
런타임 존재 여부⭕ (객체로 변환)⭕ (객체로 변환)❌ (값으로 인라인됨)
코드 최적화보통보통최적화 (불필요한 코드 제거)
주 사용처역할, 상태 코드API 요청 타입, 방향성 등성능 최적화가 필요한 경우

Enum을 활용하면,

코드를 보다 명확하고 안전하게 작성할 수 있으며,
상황에 따라 Union Typeconst enum을 적절히 조합해 사용할 수도 있다.

profile
내가 보려고 만든 벨로그 *'-'*

0개의 댓글