enum을 사용하던 와중 우연히 enum을 사용하면 안된다라는 포스팅을 본 적이 있습니다.
하지만 왜 enum을 사용하면 안되는지에 대해서는 자세하게 알지 못했습니다.
오늘은 꼭 enum을 사용하면 안되는 것인가..? 에 대해서 자세하게 알아보려고 합니다.
제가 속한 조직에서는 enum을 선택해서 사용했는데요!
결론적으로 enum을 선택해서 사용한 의견에 대해서도 알아보려고 합니다.
enum
enum은 열거형 변수로 정수를 하나로 합칠 때 편리한 기능입니다.
임의의 숫자나 문자열을 할당할 수 있으며 하나의 유형으로 사용해서 버그를 줄일 수 있습니다.
// 아무것도 지정하지 않은 경우에는 0부터 숫자를 매깁니다.
enum MOBILE_OS {
IOS, // 0
ANDROID // 1
}
// 임의의 숫자나 문자열을 할당할 수도 있습니다
enum MOBILE_OS {
IOS = 'iOS',
ANDROID = 'Android'
}
enum은 타입스크립트가 자체적으로 구현하는 기능입니다.
enum과 트리 쉐이킹 (Tree-shaking)
enum을 사용하지 않는 것을 권장하는 것 중 제일 큰 이유가 tree-shaking입니다.
Tree-shaking이란?
- 사용하지 않는 코드를 삭제하는 기능
- 번들 크기를 줄여 페이지가 표시되는 시간을 단축할 수 있다.
enum을 사용하게 되면 tree-shaking이 되지 않습니다.
왜냐하면 타입스크립트가 자체적으로 구현했기 때문에 타입스크립트는 자바스크립트로 변환할 때 IIFE(즉시 실행 함수)를 포함한 코드를 생성합니다.
하지만 rollup과 같은 번들러는 IIFE를 사용하지 않는 코드라고 판단할 수 없어서 tree-shaking이 되지 않습니다.
결과적으로 사용하지 않는 코드들도 최종 번들에는 포함되어 있습니다.
enum과 enum을 대체할 수 있는 것
- enum
- const enum
- Union Types
enum
enum CountryCode1 {
'Argentina' = 'AR',
'China' = 'CN',
'Korea' = 'KR',
}장점
1. key 값에 의미 있는 값을 부여할 수 있습니다.
2. 타입에 enum을 지정하면 따로 key에 대한 타입을 만들지 않아도 돼서 편리합니다.
3. Object.keys, Object.entries를 이용해서 값들에 대한 순회가 편리합니다.
(number타입의 value 사용하지 않을 때)
4. enum을 쓰는 쪽에서는 오타를 낼 확률이 0%가 됩니다. 무조건 enum 값으로 써야 하기 때문입니다.(number타입의 value 사용하지 않을 때)
5. value가 number 형일 때, 양방향 매핑이 가능합니다.
단점
1. tree-shaking이 되지 않습니다.
2. 자바스크립트로 변환되고 나면 비교적 용량이 커집니다.
3. number타입의 value가 있다면 문제가 발생합니다.
4. value가 number 형일 때, 양방향 매핑이 가능합니다.
const enum
const enum CountryCode2 {
'Argentina' = 'AR',
'China' = 'CN',
'Korea' = 'KR',
}장점
1. tree-shaking이 됩니다.
2. 자바스크립트로 변환되고 나면, 매우 적은 용량을 차지합니다.
3. key 값에 의미 있는 값을 부여할 수 있습니다.
4. enum을 쓰는 쪽에서는 오타를 낼 확률이 0%가 됩니다. 무조건 enum 값으로 써야 하기 때문입니다.(number타입의 value 사용하지 않을 때)
단점
1. Object.keys, Object.entries를 이용해서 값들에 대해 순회를 할 수가 없습니다.
2. –isolatedModules 옵션을 사용하면, 사용 불가합니다.
3. 타입스크립트 패키지를 만들고, 이를 다른 곳에서 사용한다면, 이를 타입용으로 사용할 수가 없습니다.
4. CRA, Next.js에서 사용 불가합니다.
5. babel 설정도 추가로 필요합니다.
Union Types
const CountryCode3 = {
'Argentina': 'AR',
'China': 'CN',
'Korea': 'KR',
} as const
type CountryCode3Type = typeof CountryCode3[keyof typeof CountryCode3] // 이렇게 별도의 union type을 지정해줘야 함장점
1. tree-shaking이 됩니다.
2. 자바스크립트로 변환되고 나면, 매우 적은 용량을 차지합니다.
3. Object.keys, Object.entries를 이용해서 값들에 대한 순회가 편리합니다.
4. key 값에 의미 있는 값을 부여할 수 있습니다.
단점
1. 이것을 위한 별도의 union type을 만들어야 해서, 성가십니다.
2. 원래의 의도가 enum과는 다르기 때문에, 쓰기가 약간은 망설여집니다.
결론 👨⚖️
대부분의 enum을 사용하지 않는 것을 권장하는 이유는 tree-shaking이었습니다!
하지만 저는 우아한형제들이 고민한 enum에 대한 의견에 조금 더 공감이 됐습니다.
우아한 형제들이 enum을 선택한 이유
tree-shaking이 되지 않는다고 해도,enum선언부가 엄청나게 크지 않는 이상, 이런 정도의 용량 다이어트가 필요한지 의문이다.- 번들러마다
tree-shaking이 가능하기도 하다. (rollup은 불가능,vite는 가능) - 다른 대안에 대한 단점이 부각되어 보이고, 최종적으로
enum을 쓰되,enum의 단점을 최소화하고 장점을 극대화시키기 위해서value는string형으로 사용한다.
정도가 될 것 같습니다!
위의 설명된 이유에 추가적으로 오타가 날 확률이 없다는 것도 저한테는 매우 매력적인 장점이라고 생각했습니다.
조금 더 자세한 설명을 확인하고 싶다면 하단의 출처를 확인해주세요!
출처
