enum 이란?
열거형, 이넘(enum)은 요소, 멤버라 불리는 명명된값의 집합을 이루는 자료형이다.
열거자 이름들은 일반적으로 해당 언어의 상수 역할을 하는 식별자이다.
기본적으로 Js에는 enum이 존재하지 않지만, Ts에는 enum이 존재하기 때문에 사용이 가능하다.
type CountryCode = 'AR' | 'CN' | 'JP' | 'KR' | 'GU' | 'GT' | 'GN' | 'US'
const countryCode: CountryCode = 'AR'위와 같이 국가 코드가 들어가는 변수에 대한 타입을 지정해 줄때, GU, KR이 어떤 나라에 대한 국가 코드인지 구분이 잘 되지 않는다.
위보다는 각 value 설명으로 key값이 있으면 더 좋다.
이럴때 enum을 사용한다.
약간의 tree-shaking 이슈를 감안하더라도 그 영향이 미미하다고 한다면 개발의 편의성, 가독성을 위해서 enum을 사용
enum을 사용하는 방법에는 3가지가 있는데,
- enum 사용
- const enum 사용
- const assertions
위와 같은 방법들이 존재한다.
왜 여러의 방법이 존재하는가?를 생각해보려면 각각의 방법의 장단점에 대해서 알아야한다.
1. enum 사용
기본적으로 ts에서 enum을 사용할때 사용하는 방법
key에 의미있는 값을 부여할 수 있다.
하지만, tree-shaking이 되지 않고, js로 변환된 후에 비교적 용량이 커질수 있는 문제가 있다.
그래서 enum의 사용은 지양하는 편
2. const enum
tree-shaking이 되고, js로 변환 후에도 적은 용량을 차지하면서, key에 의미있는 값을 부여할 수 있다.
하지만, babel등의 설정이 필요하고 제약이 많은 문제가 있다.
3. Object as const
tree-shaking이 가능하고, key에 의미있는 값울 부여할 수 있다.
단점으로는, 이것을 위한 별도의 union type을 만들어야해 번거롭고, 원래의 의도가 enum이랑은 다르다는 것이 있다.
장단점이 정리된 표
결론
결론적으로, 우아한 형제들 팀에서는 1.enum을 선택했다고 한다.
이유로는
- tree-shaking이 되지 않더라도, enum의 선언부가 엄청 크지 않은이상 무시해도 괜찮을 것이라고 판단
- enum의 value를 number로 사용하는 경우 생기는 문제가 있어, value는 string으로만 사용
- enum의 value를 number로 사용하는 경우 양방향 매핑이 가능하다는 장점이 있지만, 원치않는 키값이 추가로 나올수 있다는 단점이 동시에 존재하므로 사용하지 않기로 결정
출처 : 우아한형재들 기술블로그 : https://techblog.woowahan.com/9804/
