enum?
enum은 열거형 변수로 정수를 하나로 합칠 때 편리하다.
임의의 숫자나 문자열을 할당할 수 있으며 하나의 유형으로 사용해서 버그를 줄일 수 있다.
이게 무슨 말인지 아래 예제를 보자
type MediaSize = "100px" | "200px" | "300px";
const mediaSize: MediaSize = "200px";위와 같이 리터럴 타입과 유니온을 사용해서 변수 타입의 범위를 줄일 수 있다. 하지만 해당 사이즈가 어떤 사이즈인지 추론할 수 있는 방법이 없다. 따라서 이럴 때 enum을 사용한다.
enum MediaSize {
small = "100px",
medium = "200px",
large = "300px"
}
const mediaSize: MediaSize = MediaSize.medium;
console.log(mediaSize); // 200px리터럴의 타입과 값에 이름을 붙여서 코드의 가독성을 크게 높일 수 있다.
일반 객체와 다른 점은 enum의 속성은 변경할 수 없다.
객체 as const 식으로 비슷하게 사용할 수도 있긴하다.
또 문자열과 숫자만 속성값으로 허용된다.
따라서 같은 종류를 나타내는 여러 개의 숫자 혹은 문자열을 다뤄야 하는데, 각각 적당한 이름을 붙여서 코드의 가독성을 높이고 싶다면 enum을 사용하는게 좋다.
그럼 enum을 무조건 쓰는게 좋나?
결과적으로는 아니다. 그럼 왜?
enum을 사용하면 Tree-shaking이 되지 않는다.
Tree-shaking
Tree-shaking이란 간단하게 말해 사용하지 않는 코드를 삭제하는 기능을 말합니다. 나무를 흔들면 죽은 잎사귀들이 떨어지는 모습에 착안해 Tree-shaking이라고 부릅니다. Tree-shaking을 통해 export했지만 아무 데서도 import하지 않은 모듈이나 사용하지 않는 코드를 삭제해서 번들 크기를 줄여 페이지가 표시되는 시간을 단축할 수 있습니다. 출처 링크
