TypeScript에서 Enum을 사용하면 안 되는 이유

Kim Young Jae·2024년 10월 20일

TypeScript의 Enum 사용을 피해야 하는 이유: 트리 쉐이킹

TypeScript의 enum은 코드의 가독성을 높이는 데 유용하지만, 성능 최적화 측면에서 몇 가지 단점을 가지고 있습니다. 특히 트리 쉐이킹(Tree Shaking)과 관련하여 enum 사용을 피해야 하는 이유에 대해 알아보겠습니다.

1. 트리 쉐이킹의 개념

트리 쉐이킹은 사용되지 않는 코드를 제거하여 최종 번들 크기를 줄이는 기법입니다. 주로 ES6 모듈을 사용하는 환경에서 효과적으로 작동하며, 모듈 번들러(예: Webpack, Rollup)가 이를 수행합니다. 사용되지 않는 코드가 번들에 포함되지 않도록 정적 분석을 통해 이루어집니다.

2. Enum의 구조와 동작 방식

TypeScript의 enum은 컴파일될 때 런타임 객체로 변환됩니다. 이로 인해 enum의 모든 값이 최종 번들에 포함됩니다. 예를 들어, 아래의 enum 예시를 살펴보겠습니다:

enum Status {
    Pending = "pending",
    Approved = "approved",
    Rejected = "rejected",
}

위의 코드에서 Status enum은 세 개의 문자열 값을 포함합니다. 코드에서 Status enum의 일부 값만 사용하더라도, 모든 값이 최종 번들에 포함될 수 있습니다.

3. 트리 쉐이킹과 Enum의 문제점

런타임 객체: enum은 런타임에 존재하는 객체이므로, 사용되지 않는 값이 코드에 남아있게 됩니다. 이는 트리 쉐이킹이 제대로 작동하지 않는 원인이 됩니다.
정적 분석의 한계: enum의 값들이 런타임에 필요하기 때문에, 사용되지 않는 값이 정적으로 분석되기 어렵습니다. 이로 인해 최종 번들에서 제거되지 않고 포함될 수 있습니다.

예시

function getStatusMessage(status: Status) {
    switch (status) {
        case Status.Pending:
            return "Your request is pending.";
        case Status.Approved:
            return "Your request has been approved.";
        case Status.Rejected:
            return "Your request has been rejected.";
        default:
            return "Unknown status.";
    }
}

위 코드에서 getStatusMessage 함수는 Status enum의 값 중 일부만 사용할 수 있지만, 모든 값이 번들에 포함됩니다.

4. 대안: 리터럴 타입 및 유니언 타입

트리 쉐이킹을 최적화하기 위해 enum 대신 리터럴 타입과 유니언 타입을 사용하는 것이 좋습니다. 이를 통해 사용되지 않는 코드의 포함을 방지할 수 있습니다.

type Status = "pending" | "approved" | "rejected";

function getStatusMessage(status: Status) {
    switch (status) {
        case "pending":
            return "Your request is pending.";
        case "approved":
            return "Your request has been approved.";
        case "rejected":
            return "Your request has been rejected.";
        default:
            return "Unknown status.";
    }
}