Frontend/Typescript

TypeScript 열거형(Enum) vs const 객체: 성능과 가독성 측면에서의 비교 분석

미니임 2026. 2. 19. 07:42

 

TypeScript로 프로젝트를 진행하다 보면, 연관된 상수 값들을 그룹화해야 하는 상황을 자주 마주하게 됩니다. 이때 가장 먼저 떠오르는 도구는 Enum입니다. 하지만 최근에는 const 객체와 as const 단언을 사용하는 방식이 더 선호되기도 합니다.

오늘은 이 두 방식의 차이점을 **성능(번들 사이즈, 트리 쉐이킹)**과 가독성(개발자 경험) 측면에서 심층 비교해 보겠습니다.

1. TypeScript 열거형 (Enum)

Enum은 관련된 상수들의 집합을 정의할 때 사용하는 TypeScript만의 고유한 문법입니다.

코드 예제

enum UserRole {
  Admin = 'ADMIN',
  Editor = 'EDITOR',
  Viewer = 'VIEWER'
}

function checkAccess(role: UserRole) {
  if (role === UserRole.Admin) {
    console.log("관리자 권한입니다.");
  }
}

특징

  • 역방향 매핑(Reverse Mapping): 숫자형 Enum의 경우, 값으로 이름을 찾을 수 있는 역방향 매핑을 지원합니다. (문자열 Enum은 미지원)
  • 런타임 존재감: Enum은 컴파일 후에도 JavaScript 객체로 남아 런타임에 영향을 줍니다.
  • 명확한 의도: "이것은 열거형 타입이다"라는 의도를 소스코드 상에서 가장 명확하게 드러냅니다.

2. const 객체 (as const)

객체 리터럴 뒤에 as const를 붙여 모든 속성을 readonly로 만들고, 타입을 리터럴 타입으로 좁히는 방식입니다.

코드 예제

const USER_ROLE = {
  Admin: 'ADMIN',
  Editor: 'EDITOR',
  Viewer: 'VIEWER'
} as const;

// 타입을 추출하여 Enum처럼 사용 가능
type UserRole = typeof USER_ROLE[keyof typeof USER_ROLE];

function checkAccess(role: UserRole) {
  if (role === USER_ROLE.Admin) {
    console.log("관리자 권한입니다.");
  }
}

특징

  • 순수 JavaScript: 별도의 컴파일 로직 없이 표준 JavaScript 객체와 동일하게 작동합니다.
  • 유연성: 별도의 타입 선언 없이도 객체의 키나 값을 자유롭게 타입으로 추출하여 활용하기 좋습니다.

3. 성능 측면 비교 (트리 쉐이킹)

성능 관점에서 가장 큰 차이는 트리 쉐이킹(Tree Shaking) 여부입니다.

Enum의 문제점

일반적인 Enum은 컴파일 시 IIFE(즉시 실행 함수) 형태의 코드를 생성합니다. 번들러(Webpack, Rollup 등)는 이 IIFE 내부에서 어떤 값이 사용되는지 판단하기 어려워하며, 결과적으로 사용하지 않는 Enum 값도 번들 파일에 포함되는 경우가 발생합니다.

컴파일 결과 (Enum):

var UserRole;
(function (UserRole) {
    UserRole["Admin"] = "ADMIN";
    UserRole["Editor"] = "EDITOR";
    UserRole["Viewer"] = "VIEWER";
})(UserRole || (UserRole = {}));

const 객체의 장점

반면 const 객체는 일반적인 객체이므로 번들러가 참조되지 않는 속성을 쉽게 식별하고 제거할 수 있습니다. 또한 const enum을 사용할 수도 있지만, 이는 라이브러리 배포 시 isolatedModules 옵션과 충돌할 수 있는 제약이 있습니다.

4. 가독성 및 DX (개발자 경험)

가독성

  • Enum: 타입 이름 자체가 타입으로 사용되므로 코드가 간결합니다. function(role: UserRole)과 같이 직관적인 표현이 가능합니다.
  • const 객체: 타입을 별도로 추출해야 하는 번거로움이 있습니다. 하지만 객체 지향적인 관점에서는 더 익숙한 구조일 수 있습니다.

유지보수성

Enum은 새로운 멤버를 추가할 때 구문이 단순하지만, 문자열 타입과의 호환성 문제(타입 세이프티)가 엄격하여 때로는 유연함이 떨어질 수 있습니다. const 객체는 객체 전개 연산자(...) 등을 활용해 상수를 조합하거나 확장하는 데 훨씬 유리합니다.

5. 비교 요약표

구분Enumconst 객체 (as const)

트리 쉐이킹 어려움 (IIFE 생성) 매우 쉬움
타입 정의 내장 기능으로 간편함 keyof typeof 조합 필요
확장성 낮음 높음 (객체 조작 용이)
JS 호환성 TS 전용 문법 표준 JS 문법
추천 용도 간단한 상수 집합, 명확한 타입 구분 대규모 프로젝트, 번들 최적화 중요 시

결론: 무엇을 선택해야 할까?

현대적인 프론트엔드 개발 환경(특히 React, Vue 등 번들 사이즈가 중요한 환경)에서는 const 객체와 as const 조합을 권장합니다.

  1. 번들 최적화가 중요하고,
  2. 트리 쉐이킹을 통해 불필요한 코드를 줄이고 싶다면 const 객체가 정답입니다.

다만, 백엔드와의 통신에서 상수를 명확히 타입화해야 하거나, 소규모 스크립트에서 가독성과 직관성을 최우선으로 한다면 Enum 역시 여전히 훌륭한 선택지입니다.

프로젝트의 규모와 성격에 맞춰 적절한 도구를 선택하시기 바랍니다.

반응형