TypeScript - enum 열거형 타입

오 뭔가 진짜 와닿지 않은 enum 타입.

실제로 사용해보면 조금은 와닿을까 ?

공부하고 나니 조금은 적응 완..

---

enum은 타입 스크립트에 있는 특이한 타입인데

이해하기 위해서는 주로 어떨 때 쓰이는지 알고 이해하면, 보다 쉽게 이해할 수 있었다.

 

예제는 다음과 같다.

 

역할을 정리하는 타입을 만든다고 할 때,

enum Role {
  ADMIN,
  USER,
  GUEST,
}

이렇게 고정된 역할들 리스트를 만들어줄 수 있고,

enum Role {
  ADMIN = 0,
  USER = 1,
  GUEST = 2,
}

이런식으로 각 멤버에게 숫자도 할당 할 수 있다.

 

 

* 참고로 이렇게 직접 지정하지 않아도, enum은 0부터 1씩 늘어나는 성질 때문에

enum Role {
  ADMIN, // 0 할당(자동)
  USER,  // 1 할당(자동)
  GUEST, // 2 할당(자동)
}

이렇게 자동 할당이 된다.

 

 

아무튼, enum은

// enum 타입
// 여러가지 값들에 각각 이름을 부여해 열거해두고 사용하는 타입

enum Role {
  ADMIN = 0,
  USER = 1,
  GUEST = 2,
}

const user1 = {
  name: "이정환",
  role: Role.ADMIN, //관리자
};

const user2 = {
  name: "홍길동",
  role: Role.USER, // 회원
};

const user3 = {
  name: "아무개",
  role: Role.GUEST, // 게스트
};

이런식으로, user1.role에는 0이, 그리고 user2.role은 1이 이런식으로 할당이 되는데,

숫자 말고도 이런식으로 직접 값을 사용함으로 보다 안전하고 직관적으로 관리가 가능하다.

---

그렇다면, 굳이 왜 enum 일까.

바닐라 자바스크립트로도 구현할 수는 없을까?

자바스크립트의 배열이나 객체로도 충분히 해낼 수 있을 것 같았다.

const Wearther = {
    	sun = 'sunny',
      	cloud = 'cloudy',
      	rain = 'rainy'
    }

해당 코드 처럼 배열이나 객체로써 비슷하게 할 수 있을 것 같지만,

타입 검사나 자동 완성 기능이 없어 실수가 생길 수 있다.

 

이러한 "안정성"과 "가독성", "자동완성", "오타방지" 등 다양한 이유로, enum을 쓰는거고

쉽게 말해 고정된 값들의 선택지를 미리 정해둔다고 생각하면 쉽다.

 

개발자의 실수나 버그를 줄이기 위한, 조금 더 편리한 도구라고 이해하고 넘어가자.

---

따라서 이유를 정리해본다면 이렇다.

enum을 쓰는 이유는, 

 

1) 역할 명확화로써 가독성 증가. 의미 전달 쉬움

js.
// IOS === 0
// ANDROID === 1

if(OsType === 0) {
	console.log("OS는 IOS입니다.")
}

예를 들어 해당 코드에서, ios는 0, Android는 1이라고 기억하고 관리할 경우,

이러한 값들을 모두 기억하며 관리하기엔 실수도 생길것이고 디버깅에도 어려움이 있을 것이다.

 

하지만 enum으로써 필요한 역할 값들의 선택지를 정리해두고 사용한다면, 직관적으로 값을 알 수 있어 

다른 사람이 코드를 보더라도 명확한 이해로 협업에도 도움이 될 것 이다.

enum OsType {
    	IOS, // 0
      	ANDROID, // 1
      	NOKIA // 2
    }

if(OsType === OsType.IOS) {
	console.log("OS는 IOS입니다.")
}

 

또 다른 예시로는, 

유저의 역할 구분을 할 때, 

enum UserRole {
  Admin,
  User,
  Guest
}

function checkPermission(role: UserRole) {
  if (role === UserRole.Admin) {
    console.log("관리자 권한 있음");
  }
}

이렇게 하면 role = "Admn" 같은 오타를 낼 수 없고, 정해진 Admin, User, Guest 중 하나만 쓸 수 있고, 자동완성으로 편하다.

고정된 값 셋을 쓸 때 좋다.

 

enum Direction {
  Up,
  Down,
  Left,
  Right
}

function move(dir: Direction) {
  if (dir === Direction.Left) { ... }
}

 

2) 자동 완성과 타입 체크 

move(Direction.Up);     // ✅
move("Up");             // ❌ 문자열은 오류!

enum은 자동으로 타입 체크와 자동완성을 해주니, 오류를 쉽게 찾아낼 수 있다.

 

 

3) 2번의 이유로, 오타나 실수를 방지할 수 있음

자바스크립트에서 비슷하게 구현할 경우,

const weatherCondition = (weatherType: string) => {
	switch(weatherType) {
      case 'sunny':
        console.log('오늘의 날씨는 sunny 입니다.')
        break
      case 'Sunny':
        console.log('오늘의 날씨는 대왕 Sunny 입니다.')
        break
      case 'cloud':
        console.log('오늘의 날씨는 cloudy 입니다.')
        break
      case 'Cloud':
        console.log('오늘의 날씨는 대왕 Cloudy 입니다.')
        break
      case 'rain':
        console.log('오늘의 날씨는 rainy 입니다.')
      case 'Rain':
        console.log('오늘의 날씨는 대왕 Rainy 입니다.')
        break
      default:
        console.log('weatherType을 잘못 입력하셨습니다.')
        break
    }
}

뭐 이런식으로도 구현은 할 수 있겠지만..

sunny라는 값을 사용할 때, Sunny 와 같은 뭐 오류는 찾아내기 힘드니,

고정된 값으로 선택지가 아예 마련된 enum을 사용하는 것이 효율적이다.

 

 

---

enum의 특징

 

1 )

enum은 0부터 시작하며 내부 멤버들의 번호를 매긴다.(배열 인덱스 처럼)

이 enum의 인덱스는 0부터 시작할 필요는 없고, 직접 지정해줄 수도 있다.

수동으로 값을 명시해줄 수 있는데, 값이 변경된 부분부터 다시 +1씩 증가한다.

 

* 또한 enum은 숫자열 이외에, 문자열 값으로도 할당 할 수 있다.

당연히, 문자열에는 자동 숫자 증가 이런 기능은 없다.

 

2)

역방향 매핑

 

인덱스처럼 0부터 숫자를 매기니까, 

숫자로써 이름을 찾는 역방향 매핑도 가능하다. 디버깅할 때 유용하다.

 

예를 들어, 

enum Status {
  Ready,    // 0
  Loading,  // 1
  Done      // 2
}

타입스크립트는 이걸 이중 객체로 만드는데, 

// 컴파일된 JavaScript 형태 (간략화)
{
  0: "Ready",
  1: "Loading",
  2: "Done",
  Ready: 0,
  Loading: 1,
  Done: 2
}

그래서 아래처럼 숫자로 이름을 찾는 것도 가능한 것.

console.log(Status[0]); // "Ready"  ← 이게 역방향 매핑!

 

역방향 매핑 = 숫자 -> 이름 으로도 접근할 수 있는 기능.

(Status[0] === "Ready" 같은 거)

 

3)

enum에는 숫자 말고 문자열도 할당할 수 있음

물론 문자열에는 자동 숫자 증가와 같은 기능은 없다.

enum Language {
  korean = "ko",
  english = "en",
}

enum Role {
  ADMIN,
  USER,
  GUEST,
}

enum Language {
  korean = "ko",
  english = "en",
}

const user1 = {
  name: "이정환",
  role: Role.ADMIN, // 0
  language: Language.korean,// "ko"
};

이런식으로 문자열도 할당 가능하다. 

---

결론을 정리하자면,

enum은 필요한 분야의 값들에 정해진 선택지를 만들어주고, 그 안에서 안정적으로 그 값을 쓸 수 있는 기능이다.

자바스크립트에서도 구현은 할 수 있겠지만, 타입 검사나 자동완성과 같은 기능이 없으므로 

고정된 셋을 사용할 때 enum 을 주로 사용 !

 

+ 실제로 나도 프로젝트를 할 때, 

내가 정해둔 값이 기억이 안나서 Sunny, sunny 이런식으로 대소문자가 헷갈릴 때가 있었는데

내 스스로도 헷갈리지 않기도 좋을 것 같고, 실제로 협업할 때 효율적일 것 같았다.

---

출처 :

한 입 크기로 잘라먹는 타입 스크립트, 블로그

1. 

📘 타입스크립트 Enum 타입 정복하기

 

2.

[TypeScript] Enum이란