코드 명확성의 핵심
타입스크립트(TypeScript)에서 열거형(Enum)은 자주 접하게 되는 중요한 개념입니다.
타입스크립트는 비교적 새로운 언어임에도 불구하고 개발자들 사이에서 매우 인기 있는 프로그래밍 언어로 자리 잡았습니다. 이는 자바스크립트(JavaScript)의 확장된 형태(상위집합)이며, 유효한 자바스크립트 코드는 타입스크립트에서도 그대로 작동합니다. 하지만 타입스크립트는 자바스크립트에는 없는 정적 타이핑 기능을 도입하여 코드의 안정성과 가독성을 높였습니다.
그렇다면 타입스크립트 열거형이란 무엇이며, 어떠한 경우에 사용되고, 어떻게 생성할 수 있을까요? 이 글에서는 열거형에 대한 모든 것을 자세히 알아보겠습니다.
타입스크립트 열거형이란 무엇인가?
열거형(enumeration)은 변경되지 않는 값(상수)들의 집합을 담는 고정된 길이의 데이터 구조입니다. 타입스크립트는 C#이나 Java와 같은 객체 지향 언어에서도 사용되는 열거형을 제공하며, 이는 열거형이 타입스크립트만의 고유한 기능이 아님을 보여줍니다.
타입스크립트에서 열거형을 사용하면 개발자는 특정 시나리오나 의도를 명확하게 정의할 수 있습니다. 또한, 특정 개수의 값만을 가질 수 있는 속성을 설정하는 데에도 유용합니다. 예를 들어, 지구에는 7개의 대륙만이 존재할 수 있다는 것을 열거형으로 표현할 수 있습니다.
요약하자면, 타입스크립트 열거형은 다음과 같은 점에서 중요합니다.
- 개발자가 코드의 의도와 사용 사례를 명확하게 문서화하고 표현할 수 있도록 돕습니다.
- 열거형을 통해 자바스크립트에서 효율적인 사용자 정의 상수를 생성할 수 있습니다.
- 타입스크립트 코드가 자바스크립트 코드로 컴파일될 때 컴파일 시간과 런타임 성능을 최적화합니다.
타입스크립트 열거형은 숫자 또는 문자열 형태를 가질 수 있습니다. 하지만 열거형은 전처리 과정에서 처리되며, 테스트 단계에서는 직접적인 테스트를 거치지 않습니다. 타입스크립트는 열거형을 자바스크립트 코드로 변환합니다.
타입스크립트의 다양한 열거형
열거형의 기본 개념을 이해했으므로, 이제 타입스크립트에서 실제로 어떻게 작동하는지 살펴보겠습니다. 로컬 컴퓨터에 타입스크립트와 Node.js를 설치하거나 온라인 환경을 활용하여 개발 서버를 설정할 수 있습니다. 여기서는 타입스크립트 플레이그라운드를 이용하여 다양한 타입스크립트 열거형을 보여드리겠습니다.
타입스크립트에서 사용 가능한 열거형 타입은 다음과 같습니다.
#1. 숫자 열거형
열거형을 정의하기 위해서는 'enum' 키워드를 사용해야 하며, 그 뒤에 생성하려는 열거형의 이름을 명시합니다. 그런 다음, 중괄호({}) 안에 열거형의 멤버들을 정의합니다. 아래는 숫자 열거형의 예시입니다.
enum CardinalDirections {
North = 5,
East,
South,
West,
}
위 코드는 4개의 멤버(North, East, South, West)를 가진 CardinalDirections라는 열거형을 정의합니다. 이 경우, 방향은 4가지 값 중 하나만 가질 수 있기 때문에 열거형은 데이터를 표현하는 데 탁월한 선택입니다.
여기서, CardinalDirections.North에는 값 5를 할당했지만, 다른 값들은 할당하지 않았습니다. 타입스크립트는 나머지 값들을 자동으로 할당하는데, 이전 값에서 1씩 증가하는 규칙을 따릅니다. 따라서 CardinalDirections.East는 값 6을, CardinalDirections.West는 값 8을 갖게 됩니다.
그렇다면 중괄호 안의 첫 번째 항목에 값을 할당하지 않으면 어떻게 될까요? 다음과 같은 열거형을 예로 들어보겠습니다.
enum CardinalDirections {
North,
East,
South,
West,
}
이 경우, 타입스크립트는 North에 자동으로 값 0을 할당하고, 나머지 멤버들에게는 1씩 증가된 값을 할당합니다. 즉, CardinalDirections.West를 호출하면 3을 얻게 됩니다.
#2. 문자열 열거형
문자열 열거형의 각 멤버는 다른 문자열 열거형 멤버 또는 문자열 리터럴로 초기화되어야 합니다. 다음은 문자열 열거형의 예시입니다.
enum Direction {
Up = "UP",
Down = "DOWN",
Left = "LEFT",
Right = "RIGHT",
}
이 열거형은 숫자 열거형처럼 값이 자동으로 증가하지 않습니다. 이 코드를 실행하면;
enum Direction {
Up = "UP",
Down = "DOWN",
Left = "LEFT",
Right = "RIGHT",
}
console.log(Direction.Right);
다음과 같은 결과를 얻습니다.
"RIGHT"
#3. 이종 열거형
숫자와 문자열 멤버를 혼합하여 이종 열거형을 만들 수 있습니다. 다음은 그 예시입니다.
enum HeterogeneousEnum {
No = 0,
Yes = "YES",
}
#4. 상수 및 계산된 열거형 멤버
열거형 멤버는 '상수' 또는 '계산'된 값을 가질 수 있습니다.
다음은 상수 열거형의 예시입니다.
enum E1 {
X,
Y,
Z,
}
이 경우, 열거형의 첫 번째 멤버는 초기화되지 않았으므로 타입스크립트는 자동으로 0을 할당합니다.
다음과 같은 예시도 고려해 볼 수 있습니다.
enum E1 {
X=1,
Y,
Z,
}
첫 번째 멤버에 값이 할당되면, 나머지 멤버들에게는 증가 규칙이 적용됩니다. 따라서 이 경우도 상수 열거형입니다.
계산된 열거형은 상수와 계산된 멤버를 혼합하여 사용합니다. 다음 예시를 살펴보세요.
enum Color {
Red = 100,
Green = (Math.random() * 100),
Blue = 200
}
열거형 멤버 'Blue'는 상수 멤버입니다. 반면, 열거형 멤버 'Green'은 런타임 시 Math.random() 함수에 의해 계산된 값을 갖는 멤버입니다.
#5. 상수 열거형
상수 열거형은 숫자 열거형의 성능을 개선하는 데 사용됩니다. 이 경우 열거형을 'const'로 선언합니다.
요일을 표현하는 다음 코드를 예로 들어보겠습니다.
enum Weekday {
Monday = 1,
Tuesday,
Wednesday,
Thursday,
Friday
}
console.log(Weekday.Thursday)를 실행하면 결과로 4를 얻습니다. 그러나 컴파일 시 생성된 자바스크립트 코드를 확인하면 다음과 같습니다.
"use strict";
var Weekday;
(function (Weekday) {
Weekday[Weekday["Monday"] = 1] = "Monday";
Weekday[Weekday["Tuesday"] = 2] = "Tuesday";
Weekday[Weekday["Wednesday"] = 3] = "Wednesday";
Weekday[Weekday["Thursday"] = 4] = "Thursday";
Weekday[Weekday["Friday"] = 5] = "Friday";
})(Weekday || (Weekday = {}));
console.log(Weekday.Thursday);
이 코드를 수정하고 'Weekday'를 상수로 선언할 수 있습니다.
const enum Weekday {
Monday = 1,
Tuesday,
Wednesday,
Thursday,
Friday
}
이 코드를 실행하고 console.log(Weekday.Thursday)를 실행하면 컴파일 시 생성되는 자바스크립트 코드는 다음과 같습니다.
"use strict"; console.log(4 /* Weekday.Thursday */);
열거형을 'const'로 선언하면 컴파일 시 생성되는 자바스크립트 코드가 최적화되는 것을 확인할 수 있습니다.
#6. 앰비언트 열거형
앰비언트 열거형은 'declare' 키워드를 사용하여 이미 존재하는 열거형의 타입을 설명합니다. 다음 예시를 살펴보세요.
declare enum Color {
Red,
Green,
Blue
}
앰비언트 열거형은 모듈 외부에서 선언되며, 재사용 가능한 타입을 만드는 데 활용될 수 있습니다. 따라서, 전역적으로 선언되기만 하면 어디서든 앰비언트 열거형을 가져와서 컴포넌트에서 사용할 수 있습니다.
이제 타입스크립트의 다양한 열거형 타입을 이해했습니다. 이제 열거형을 다양한 방법으로 사용하는 방법을 보여드리겠습니다. 다음 코드를 기준으로 설명하겠습니다.
enum Direction {
North="N",
East="E",
South="S",
West="W",
}
다음은 몇 가지 사용 사례입니다.
- 열거형 멤버를 추출합니다. 예를 들어 North에 접근하려면 다음과 같이 사용할 수 있습니다.
console.log(Direction.North); // 출력: 'N'
- 열거형 멤버 사용: 특정 열거형 멤버를 선택하여 특정 방향을 나타낼 수 있습니다. 예를 들어,
const currentDirection = Direction.East;
console.log(`현재 방향은 ${currentDirection}`);
위 코드는 "현재 방향은 E"라는 결과를 출력합니다.
타입스크립트에서 열거형과 객체 맵 비교
열거형은 제한된 값 집합을 나타내는 데 사용됩니다. 예를 들어, 무지개 색깔이나 요일 등이 있습니다. 열거형은 강력한 형식으로 지정되므로 개발 중에 발생하는 모든 오류를 감지합니다. 다음은 타입스크립트 열거형의 예시입니다.
enum Color {
Red,
Green,
Blue,
}
객체 맵(사전, 키-값 쌍)은 특정 키와 관련된 값을 저장하고 검색하는 데 사용됩니다. 타입스크립트 객체 맵을 사용하여 모든 타입의 데이터를 저장할 수 있지만, 엄격하게 형식화되지 않았기 때문에 개발 중 타입 에러를 감지하지 못할 수 있습니다. 다음은 동일한 색상을 객체 맵으로 표현한 예시입니다.
const colors = {
red: "FF0000",
green: "00FF00",
blue: "0000FF",
};
타입스크립트에서 열거형과 객체 맵의 주요 차이점은 다음과 같습니다.
- 열거형은 엄격하게 형식화되지만, 객체 맵은 그렇지 않습니다.
- 열거형은 '타입'이고, 객체 맵은 데이터 구조입니다.
- 열거형은 유연성이 떨어지지만, 객체 맵은 유연성이 높습니다.
타입스크립트에서 열거형 사용 시 모범 사례
타입스크립트가 열거형 기능을 제공하는 유일한 프로그래밍 언어가 아니라는 점은 이미 언급했습니다. 모범 사례를 따르면 깔끔하고 최적화된, 오류 없는 코드를 작성할 수 있습니다. 다음은 타입스크립트 열거형을 작성하거나 사용할 때 유용한 모범 사례입니다.
- 열거형 이름은 항상 대문자로 시작합니다. 예를 들어, 'number' 대신 열거형 'Number'를 사용하는 것이 좋습니다.
- 상수에 열거형을 사용하세요. 열거형은 관련된 항목들의 고정된 집합을 정의하는 데 적합합니다. 예를 들어, 일주일은 항상 7일입니다. 열거형 멤버는 실행 중에 변경되어서는 안 됩니다.
- 열거형을 과도하게 사용하지 마세요. 새로운 기능을 배우면 프로젝트 전체에서 사용하고 싶을 수 있지만, 열거형은 적절한 경우에만 사용해야 합니다. 코드 가독성을 유지하는 데 도움이 될 때 사용하세요.
- 열거형을 열거형으로만 사용하세요. 열거형은 다양한 용도로 활용할 수 있지만, 열거형은 열거형으로만 표현하는 것이 가장 좋습니다. 다른 데이터 구조를 표현하는 데 사용하지 마세요.
- 자동 열거형 할당을 피하세요. 타입스크립트는 열거형 멤버에 값을 명시적으로 할당하지 않으면 자동으로 값을 할당합니다. 열거형 값을 직접 지정하여 코드를 실행할 때 발생할 수 있는 예상치 못한 동작을 방지하세요.
- 열거형을 문서화하세요. 다른 사람들이 코드를 사용할 수 있도록 만들려면, 코드에 주석을 달거나 문서화해야 합니다. 모든 열거형의 기능과 최적의 사용 사례를 설명하세요.
개발자로서 유용한 타입스크립트 라이브러리와 런타임을 탐색하는 것도 도움이 될 수 있습니다.
결론
타입스크립트에서 열거형을 정의하는 방법과 다양한 유형, 사용 사례에 대해 알아보았습니다. 타입스크립트는 코드 명확성이 필요한 경우 유용합니다. 하지만 열거형을 사용하지 않고 객체를 사용해야 하는 경우도 있습니다.
예를 들어, 동적인 값을 처리할 때는 열거형을 사용하면 안 됩니다. 또한 열거형을 변수로 사용할 수도 없습니다. 오류가 발생합니다.
타입스크립트와 자바스크립트의 차이점이 여전히 헷갈린다면, 타입스크립트와 자바스크립트의 차이점에 대해 자세히 알아볼 수 있습니다.