TypeScript Enum, 그리고 숨어있는 활용 꿀팁

TypeScript의 Enum의 기본 개념과 사용법

Enum이란?

Enum(열거형)은 TypeScript에서 여러 개의 상수 값을 하나의 그룹으로 묶어 관리할 수 있게 도와주는 데이터 타입이다. 주로 코드의 가독성을 높이고, 유지보수를 편리하게 하는 데 사용된다. Enum을 사용하면 숫자나 문자열 값을 명확한 이름으로 나타낼 수 있어 코드 작성과 관리가 쉬워진다.

Enum의 기본 사용법

기본적인 Enum 사용법은 다음과 같다.

enum Direction {
  Up,
  Down,
  Left,
  Right,
}

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

이 코드에서 Direction은 Enum 타입으로, Up, Down, Left, Right는 Enum의 멤버이다. Enum 멤버는 기본적으로 0부터 시작하여 자동으로 증가하는 숫자 값을 갖는다.

Enum의 값 설정하기

Enum의 멤버 값은 원하는 값으로 직접 설정할 수 있다.

enum Direction {
  Up = 1,
  Down,
  Left,
  Right,
}

console.log(Direction.Down); // 2 출력

위 코드에서 Up을 1로 설정하면 나머지 멤버는 자동으로 1씩 증가한다.

문자열 Enum

TypeScript에서는 문자열 값도 Enum 멤버로 사용할 수 있다.

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

console.log(Direction.Left); // "LEFT" 출력

문자열 Enum은 코드를 좀 더 직관적으로 만들어 주고, 디버깅 시 유용하다.

Enum의 활용

Enum은 아래와 같은 상황에서 특히 유용하게 사용된다.

• 명확한 상태 관리를 위한 값 정의
• 코드 가독성 향상
• 오타 방지 및 코드 유지보수 용이

Enum을 적극적으로 사용하면 코드 품질을 높이고, 협업 시에도 더 나은 코드 일관성을 유지할 수 있다.

Enum을 활용한 다양한 접근 방법

객체로서 Enum의 활용

TypeScript의 Enum은 type이나 interface와는 달리 컴파일 이후에도 존재한다. 즉, TypeScript의 Enum은 컴파일 시 JavaScript 객체로 변환되어 결과물에 포함된다는 말이다. 따라서 Object.keys, Object.values, Object.entries 등을 이용해 Enum의 값을 동적으로 활용할 수 있다.

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

const directions = Object.values(Direction);
console.log(directions); // ["UP", "DOWN", "LEFT", "RIGHT"]

UI 구성 시 Enum 활용 예시

특히 UI를 구성할 때, 예를 들어 선택 옵션(select option) 목록을 구성하는 데에도 유용하다.

enum Color {
  Red = '빨강',
  Green = '초록',
  Blue = '파랑',
}

// Enum을 이용한 select option 생성 예제
const options = Object.entries(Color).map(([key, value]) => ({
  label: value,
  value: key
}));

console.log(options);
/* 출력 결과:
[
  { label: "빨강", value: "Red" },
  { label: "초록", value: "Green" },
  { label: "파랑", value: "Blue" }
]
*/

이러한 접근법을 활용하면 Enum을 보다 실용적이고 다양한 방식으로 사용할 수 있다.