반응형
1. 개요
Typescript는 강력한 타입 시스템을 통해 코드의 안정성과 가독성을 높인다.
그리고 열거형 데이터를 사용할 때 Enum보다 효율적인 Literal Types을 지원하고 있다.
Enum과 Literal Types를 비교하고 왜 Literal Types를 사용하는것이 더 나은 선택이 될지 알아보자!
2. Enum이란?
Enum은 Typescript에서 지원하는 기능으로 보통 상수 집합을 정의할 때 사용한다.
아래와 같은 방식으로 사용할 수 있다.
enum Day {
Monday = "MON",
Tuesday = "TUE",
Wednesday = "WED",
...
}
const today: Day = Day.Monday;
console.log(today); // "MON"
3. 왜 Enum이 좋은 선택이 아닐까?
Enum이 좋은 선택이 아닌 이유는 몇 가지가 있다.
- 번들 크기 증가
Javascript실행시 Enum을 위한 Javascrip객체가 추가적으로 생성된다. 이는 번들 크기를 증가시킨다. - 유연성 부족
Enum은 확장, 수정 측면에서 후술할 Literal Types에 비해 불리하다. 확장성, 수정성의 부족은 유지보수 측면에서도 불리하게 작용한다. - 타입 안정성 취약
Enum은 내부적으로 숫자를 갖기 때문에 예상치 못한 값이 할당될 수 있다.
enum Direction {
Up,
Down,
Left,
Right,
}
let dir: Direction = Direction.Up;
dir = 3; // 유효한 값으로 간주됨
4. Enum을 대체할 수 있는 Literal Types
Literal Types는 특정 값들로 타입을 제한하는 방식이다.
아래와 같이 사용할 수 있다.
type Day = "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday" | "Sunday";
// 사용 예시
const today: Day = "Monday";
console.log(today); // "Monday"
Literal Types를 사용하면 앞서 설명한 Enum의 문제를 해결할 수 있으며 간단하고 효율적으로 Enum을 대체할 수 있다.
반응형
'프론트엔드' 카테고리의 다른 글
| [React Native] React Native는 더이상 bridge방식을 이용하지 않는다. (2) | 2024.11.23 |
|---|---|
| [React Native] SVG아이콘 사용하기, 수정하기 (0) | 2024.11.22 |
| [Javascript, Tip] 효율적으로 객체 복사하기 structuredClone() (1) | 2024.11.20 |
| [React, 짧은글] VirtualDOM을 이용하면 속도가 빨라질까? (0) | 2024.11.19 |
| [Next.js] Next.js 15버전에서 테스트 환경(Jest)세팅하기 (0) | 2024.11.18 |