Enum 한 번 써보자

자바 언어를 사용하는 친구들이랑 개발 이야기를 하다보면 정말 자주 등장하는 주제가 enum이었다. 자바스크립트에 enum이 없다는 것을 친구들은 믿지 않았다. 그게 없으면 대체 변하지 않는 값은 어떻게 저장을 하냐고…저렇게 편한 것이 없으면 개발을 어떻게 하냐고… 진짜 더욱 궁금했다. 대충 어떤 용도로 Enum을 사용하는구나 정도로만 이해하고 넘어갔다. 어짜피 자바스크립트에는 없으니까…

하지만 타입스크립트에서는 enum을 사용한다는 것을 듣고 이 흥분된 기분을 감출 수 없어 바로 블로깅하러 왔다. 나도 드디어 enum을 쓸 수 있겠구나…! 이번 기회에 Enum에 대해 한번 정리하고 넘어가고자 한다.

🎯 Enum

enum은 여러 값들에 미리 이름을 정의하여 열거해두고 사용하는 타입이다.

enum Weather {
  sun = 'sunny',
  cloud = 'cloudy',
  rain = 'rainy',
}

// 아무것도 지정하지 않은 경우에는 0부터 숫자를 매긴다
enum OsType {
  IOS, // 0
  ANDROID, // 1
}

객체와 비슷하게 원하는 값을 고정시키고 사용할 때 주로 사용한다. 하지만 의문이다. 굳이 왜 enum을 사용하는 것일까?

자바스크립트의 객체는 key와 value 값이 변경될 수 있다는 점이 큰 단점이다. 하지만 enum은 불변한 상수의 열거를 위해 enum 안에서 선언한 값을 외부에서 변경할 수 없도록 한다.

🎯 Enum의 필요성

💎 분야별로 정의하여 가독성과 명확성 증가

예를 들어 OS별로 IOS는 0, ANDROID는 1로 설정하여 관리를 하는 경우, 개발자는 IOS = 0이라는 것을 기억해두고 코드를 만들어야 한다. 하지만 이런 값들을 모두 기억하고 정의하여 사용하는 것은 쉽지 않다. 관리해야 하는 값들이 1000개 그 이상이 되면 실수하기 마련이다.

하지만 이것을 enum으로 정의해두면 OS분야만 따로 모아 열겨해둬 의미를 정확하게 파악할 수 있게 된다.

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

if (TypeNum === OsType.IOS) {
  console.log('OS는 IOS입니다!');
}

💎 하드코딩의 실수 방지

만약 입력받게 되는 값을 하드코딩으로 입력한다면 한 글자라도 바뀌게 되면 출력값이 아예 달라지게 되는 혼동이 발생한다. 함수의 길이 자체도 무의미하게 길어지기 때문에 이런 혼동을 줄이기 위해서 아래와 같이 코드를 작성하면 된다.

enum Weather {
  sun = 'sunny',
  cloud = 'cloudy',
  rain = 'rainy',
}

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

enum에 있는 값과 다른 값을 입력하게 된다면 ‘weatherType을 잘못 입력하셨습니다.‘을 출력하기 때문에 더 유의미한 코드를 작성할 수 있게 된다.

🎯 Enum의 단점(feat: Tree-shaking)

enum의 문제점은 바로 Tree-shaking이다. 여기서 Tree-shaking이란 export했지만 아무데서도 import하지 않은 모듈이나 사용하지 않는 코드를 삭제하여 번들의 크기를 줄여 렌더링 시간을 줄일 수 있게 되는 것을 의미한다.

하지만 타입스크립트에서 Enum을 사용하면 Tree-shaking이 되지 않는다.

우리가 타입스크립트 자체적으로 구현했기 때문에 발생하는 문제가 있다. 브라우저는 타입스크립트가 아닌 자바스크립트를 읽을 수 있으므로 타입스크립트를 자바스크립트로 변환해야 한다. 이 과정에서 타입스크립트 컴파일러는 IIFE를 포함한 코드를 생성한다. 하지만 이 IIFE를 사용하지 않는 코드 로 판단할 수 없어서 Tree-shaking이 되지 않는다. 결국 모든 코드를 import하고 실제로 사용하지 않더라도 최종 번들에 포함되는 것이다.

🎯 결론

위 문제를 해결하기 위한 방법으로 const enum 혹은 Union Type을 사용하지만 이것 역시 문제가 많다. 일시적인 문제만 해결될 뿐 근본적인 문제가 해결되지는 않는다.

실제로 우아한 형제들 프론트엔드 개발 팀도 enum, const enum, union type 사용을 지양한다고 한다.

🎯 Enum
🎯 Enum의 필요성
- 💎 분야별로 정의하여 가독성과 명확성 증가
- 💎 하드코딩의 실수 방지
🎯 Enum의 단점(feat: Tree-shaking)
🎯 결론