enum, const enum, union literal 타입의 차이를 설명해주세요.
답변 포인트
런타임 코드 생성 여부와 번들 영향를 기준으로 정의, 장점, 한계, 예시를 함께 설명해보세요.
정답 및 해설
빠른 요약
enum은 런타임 객체를 만들고, const enum은 컴파일 시 인라인될 수 있으며, union literal은 런타임 코드 없이 허용 값 집합을 표현합니다. 단순 상태값은 union literal이 가볍습니다.
enum은 런타임 객체를 만들고, const enum은 컴파일 시 인라인될 수 있으며, union literal은 런타임 코드 없이 허용 값 집합을 표현합니다. 단순 상태값은 union literal이 가볍습니다.
핵심 개념
핵심 기준은 런타임 코드 생성 여부와 번들 영향입니다. 이 개념은 단순한 용어가 아니라, 실제 코드나 시스템에서 반복적으로 생기는 문제를 다루기 위해 등장했습니다.
TypeScript는 런타임 전에 실수를 발견하고 코드의 의도를 타입으로 문서화하기 위해 사용합니다. 좋은 타입은 자동완성, 리팩터링, 협업 안정성을 높여줍니다.
동작 흐름
- 먼저 어떤 문제가 있는지 확인합니다.
- 이 개념이 그 문제를 어떤 기준으로 나누거나 해결하는지 봅니다.
- 실제 코드에서는 입력, 상태, 실행 순서, 비용이 어떻게 바뀌는지 확인합니다.
- 마지막으로 한계와 부작용을 함께 점검합니다.
실제 예시
type Result =
| { status: "success"; data: string }
| { status: "error"; message: string };
function render(result: Result) {
switch (result.status) {
case "success":
return result.data;
case "error":
return result.message;
}
}판별 필드가 있으면 TypeScript가 분기마다 타입을 정확히 좁혀줍니다.
실무에서 주의할 점
- 타입 단언으로 오류를 덮기보다 타입을 좁히는 코드를 먼저 고려합니다.
- 런타임 검증이 필요한 외부 입력은 타입만으로 안전해지지 않습니다.
- 공개 타입은 너무 구체적이어도, 너무 느슨해도 유지보수가 어려워집니다.
함께 연결해서 보면 좋은 키워드
TS, enum, Union, LiteralType
정리
한 줄로 정리하면, enum은 런타임 객체를 만들고, const enum은 컴파일 시 인라인될 수 있으며, union literal은 런타임 코드 없이 허용 값 집합을 표현합니다. 단순 상태값은 union literal이 가볍습니다. 실무에서는 개념을 적용하는 조건과 적용하지 않았을 때 생기는 문제까지 함께 이해하는 것이 중요합니다.
enum, const enum, union literal 비교
세 방식은 제한된 값 집합을 표현할 때 쓰이지만 런타임 결과가 다릅니다.
enum Role {
Admin = 'admin',
User = 'user',
}
const enum Direction {
Up,
Down,
}
type Status = 'idle' | 'loading' | 'success' | 'error';차이점
| 방식 | 런타임 객체 | 장점 | 주의점 |
|---|---|---|---|
enum | 생성됨 | JS 값으로도 사용 가능 | 번들 증가, 숫자 enum 역매핑 |
const enum | 인라인됨 | 런타임 비용 적음 | isolatedModules/Babel 환경 이슈 |
| union literal | 없음 | 가볍고 트리쉐이킹 친화적 | 런타임 목록은 별도 필요 |
실무 추천
프론트엔드와 일반 앱 코드에서는 union literal + const 배열 조합이 단순하고 안전한 경우가 많습니다.
const STATUSES = ['idle', 'loading', 'success', 'error'] as const;
type Status = typeof STATUSES[number];