꼭 Enum을 사용해야하는 경우가 아니라면 union 타입을 사용해야하는 이유!!

안녕하세요~! 이번시간에는 타입스크립트에서 여러 타입에 대한 지정할때 자주 사용하는 enum보다 웬만하면 union type을 사용해야하는 이유에 대해 간단하게 말씀드려보려고 합니다!

Enum은 Union 타입보다 더 큰 번들사이즈를 만들어냅니다!

일반적으로 타입스크립트에서 tsc 커맨드로 자바스크립트 코드로 컴파일을 진행할때 타입스크립트만의 특징들을 제거해줍니다

• 타입 정의
• 인터페이스 정의
• 타입 어노테이션

같은 것들을 제거해주죠! 때문에 자바크립트 코드로 컴파일을하여도 파일의 사이즈에 대해 영향을 끼치진 않습니다. 하지만 Enum으로 타입을 지정할경우는 조금 다릅니다. 어떤식으로 다른지 살펴보겠습니다!

먼저, Union Type을 사용할때입니다.

type SPA = "React" | "Vue" | "Angular";

const myFavorite:SPA = "React";

위와 같이 SPA라는 타입을 만들어 myFavorite에 사용하여 React를 사용해주고 컴파일을 해주면 어떤 결과가 나올까요?

"use strict";
const myFavorite = "React";

바로 이렇게 자바스크립트 코드로 변환이 됩니다. 타입 정의에 대한 흔적은 찾아볼 수 가없죠!

그래서 번들사이즈에 영향을 끼치지 않는다는 것입니다.

---

하지만, enum을 사용하게된다면??

enum SPA {
    React = "React",
    Vue = "Vue",
    Angular = "Angular"
}

const myFavorite:SPA = SPA.React

위 처럼 enum을 사용하여 타입을 지정했습니다. 그리고 컴파일을 해준다면 어떻게 될까요?

"use strict";
var SPA;
(function (SPA) {
    SPA["React"] = "React";
    SPA["Vue"] = "Vue";
    SPA["Angular"] = "Angular";
})(SPA || (SPA = {}));
const myFavorite = SPA.React;

바로 위와 같이 코드로 변환이 됩니다.

한눈에 봐도 union 타입보다 사이즈가 커지고 복잡해진것을 알 수 있죠!

때문에 꼭 Enum을 사용해야하는 경우가 아니라면 union type을 사용을 권장드립니다.

이상 Enum보다 Union Type의 사용이 권장되는 이유에 대해 알아보았습니다

감사합니다.