본문 바로가기
개발(Development)/JS(자바스크립트)

[TypeScript] enum 기초 사용법 (+ enum이 필요한 이유)

by 카레유 2022. 8. 18.

# TypeScript 의 enum 이란?

Typescript 는 JS의 기본 타입 외에도 몇 개의 타입을 더 제공하는데,

그 중 하나가 열거형이라고 불리는 enum 이다. 

 

enum은 말 그대로,

여러 값들에 미리 이름을 정의하여 열거해 두고 사용하는 타입이다.

 

예를 들어,

사용자를 권한별로 관리해야할 때 enum으로 정의해두고 사용한다.

enum Auth {
    admin = 0, // 관리자를 0으로 표현
    user = 1,  // 회원은 1로 표현
    guest = 2  // 게스트는 2로 표현
}

 

근데 도대체 왜 enum을 사용하는걸까?

그리고 언제! 어떻게! enum을 사용하는게 좋을까?

 

enum의 기초 문법은 글 하단에서 살펴보기로 하고,

먼저 enum이 필요한 이유부터 정리해본다.


# enum 의 필요성과 존재의 이유

enum은 주로 아래의 2가지 경우에 사용한다.

 

1. 분야별로 종류를 정의하여 명확하게 사용하기 위해서.

2. 하드코딩의 실수를 줄이기 위해서.

 

1. 분야별 종류를 정의하여 사용

예를들어 사용자 권한을  관리자=0, 회원=1,  게스트=2 로 관리할 경우,

개발자는 관리자 === 0 이라는걸 기억하고 코딩해야 한다.

하지만, 관리하는 값이 늘어나면 실수가 발생하기 쉽다.

// 관리자 여부를 숫자로 체크한다.
if (userType !== 0) {
    alert("관리자 권한이 없습니다");
}

// 만약 회원 타입이 20종류가 넘어간다면???
// 관리하는 분야가 회원, 게시물, 언어타입 등등 더 늘어난다면?

 

하지만 enum으로 정의해두면,

사용자 권한 분야만 따로 모아서 정의(열거)해두고, 의미를 명확하게 파악하여 사용할 수 있다.

자동완성까지 되므로 코딩이 편해지고, 실수도 줄어들며, 가독성도 좋아진다.

// 회원 권한을 enum으로 정의
enum Auth {
    admin = 0, // 관리자
    user = 1,  // 회원
    guest = 2  // 게스트
}

// Auth.admin(==0) 으로 의미있게 값 체크 가능
if (userType !== Auth.admin) {
    alert("관리자 권한이 없습니다");
}

// 누가 코드를 읽어도, 관리자 여부를 체크하는 코드임을 이해할 수 있다!

 

또 다른 예로,

게시물의 종류를 관리할 때에도

게시물 종류만 모아서 enum으로 정의(열거)해두고 사용하면 편리하다.

// 게시물 종류를 enum으로 관리
enum Articles {
    notice,  // 0: 공지사항 (값 생략시, 0 할당됨)
    board,   // 1: 일반글 (이전값에 1을 더한 1이 할당됨)
    comment  // 2: 댓글 (이전값에 1을 더한 2가 할당됨)
}

// 게시물 등록 분기 처리에 enum 사용
switch(articleType){
    case Articles.notice:
        // DB에 공지로 등록 작업
        break;
    case Articles.board:
        // DB에 일반글로 등록 작업
        break;
    case Articles.comment:
        // DB에 댓글로 등록 작업
        break;
    default:
        break;
}

 

 

2. 하드코딩의 실수를 줄이기 위해서.

enum을 사용하면 하드코딩을 막고, 실수를 줄일 수 있다.

 

예를 들어 언어 종류를 정의해야하는 경우,

직접 'ko', 'en' 을 하드코딩하면 실수하기도 싶고,

'ko' 였는지, 'KO' 였는지, 'ko-KR' 이었는지 등을 매번 찾아봐야 한다.

 

하지만, enum으로 정의해두면 이런 하드코딩의 폐해를 막을 수 있다.

// 언어 종류 관리
enum Languages {
    korean = 'ko', // 문자열을 입력할 수도 있다.
    english = 'en',
    japanese = 'jp',
    chiense = 'cn'
}

// setLanguage("ko-kr") // 하드코딩은 이런 실수를 유발한다.
setLanguage(Languages.korean) // enum 사용시, 의미파악이 쉽고 자동완성까지 된다.

 

이러한 이유와 용도로.

필자는 Typescript의 enum 을 적극적으로 사용하고 있다.

(React 사용시, Redux 의 액션 타입을 정의할 때도 활용할 수 있다)


# enum 의 기초 문법

1. enum은 기본으로 0부터 1씩 증가하는 값을 갖는다.

/*** 1. enum은 기본으로 0부터 1씩 증가하는 값을 갖는다. ***/

enum Auth {
    admin, // 0 : 별도로 값을 지정해주지 않으면 0부터 시작한다
    user,  // 1 : 이전 값에 1씩 더해진다.
    guest  // 2 : 이전 값에 1씩 더해진다.
}

console.log(Auth.admin);  // 0
console.log(Auth.user);   // 1
console.log(Auth.guest);  // 2

 

2. 숫자 값을 지정해줄 수 있다. 정의되지 않은 값은 이전 값에서 1씩 증가한다.

/*** 2. 숫자 값을 지정해줄 수 있다. 정의되지 않으면 이전 값에서 1씩 증가한다. ***/
enum Articles {
    notice = 100, // 값을 직접 지정 가능
    board = 300,  // 값을 직접 지정 가능
    comment       // 자동으로 앞의 300에 +1 더해줌 => 301
}

console.log(Articles.notice);  // 100
console.log(Articles.board);   // 300
console.log(Articles.comment); // 301

 

3. 문자열을 지정해 줄수 있다.

/*** 3. 문자열을 지정해 줄수 있다. ***/
enum Languages {
    korean = 'ko',
    english = 'en',
    japanese = 'jp',
    chiense = 'cn'
}

console.log(Languages.korean);   // "ko"
console.log(Languages.english);  // "en"
console.log(Languages.japanese); // "jp"
console.log(Languages.chiense);  // "cn"

 

4. JS 객체와의 차이점

1) enum은 한번 생성되면, 속성 추가 및 수정이 불가하다. 객체는 생성 이후에도 속성을 추가하고 변경할 수 있다.

2) enum은 속성 값으로 숫자, 문자열만 할당할 수 있다. 객체는 온갖 것을 다 넣을 수 있다.

- 즉, enum은 JS객체보다 더 엄격하게 타입을 정의하여 사용할 때 유용하다. (이게 타입스크립트를 사용하는 이유 중 하나이기도 하다)


 

enum을 사용할 때마다

Martin Fowler 님의 프로그래밍 명언이 생각난다.

 

“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.”

 

 

 

댓글