[Typescript] Typescript에서는 enumType 대신 union을 쓰자

현재 진행중인 프로젝트에서는 직원 정보에 이름, 직급, 색상이 필요하다.

이 때, 직급과 색상 정보는 서버에서 enumType으로 관리하고 값을 전달해주기 때문에 프론트에서도 enumType 으로 값을 갖고 있어야했다.

 

 enum 은 열거형 변수로 정수를 하나로 합칠 때 편리한 기능이다. 임의의 숫자나 문자열을 할당할 수 있으며 하나의 유형으로 사용해서 버그를 줄일 수 있다. enum은 TypeScript가 자체적으로 구현하는 기능이기 때문에 JavaScript에서는 사용할 수 없다.

 

enum은 편리한 기능이지만 TypeScript가 자체적으로 구현했기 때문에(JavaScript에서 사용 불가하기 때문에)발생하는 문제가 있다. 

 

JavaScript에 존재하지 않는 것을 구현하기 위해 TypeScript 컴파일러는 IIFE(즉시 실행 함수)라고 불리는 것을 포함한 코드를 생성한다.

 

그런데 Rollup(번들러의 한 종류)과 같은 번들러는 IIFE를 '사용하지 않는 코드'라고 판단할 수 없기 때문에 Tree-shaking이 되지 않는다.  결국 선언된 enum을 import하고 실제로는 사용하지 않더라도 최종 번들에는 포함된다.

 

Tree-shaking이란 간단하게 말해 사용하지 않는 코드를 삭제하는 기능이다.
Tree-shaking을 통해 export했지만 아무 데서도 import하지 않은 모듈이나 사용하지 않는 코드를 삭제하여 번들 크기를 줄임으로써 페이지가 표시되는 시간을 단축할 수 있다고 한다.

이렇게 typescript 에서는 tree-shaking이 안된다는 문제 때문에 enum type은 지양하며, 열거형 타입을 사용하고자 할 때 enum type 대신 union의 사용을 권장한다.

 

이에 직원의 직급과 색상 코드 객체를  as const  로 선언한 후 타입스크립트의 문법으로  union  타입을 추출하는 방식을 사용하였다.

 

 

[ 예시 코드1 ]

 

enum.ts

export const enumColor = {
  RED: "FFADAD",
  ORANGE: "FFD6A5",
  YELLOW: "FDFFB6",
  GREEN: "CAFFBF",
  LIGHT_BLUE: "9BF6FF",
  BLUE: "A0C4FF",
  PURPLE: "BDB2FF",
  PINK: "FFC6FF",
  GRAY: "DEDEDE",
} as const;

import * as enumType from "../../../commonType/enum";

const manage = () =>{
  ...
  return (
    <div>...
      <span 
      style={{
        backgroundColor: `#${
          enumType.enumColor[
            item.color as keyof typeof enumType.enumColor
          ]
        }`,
      }}
      ></span>
    </div>
  )
}

item.color 는 서버에서 보내주는 직원에 대한 색상 정보로 "RED", "YELLOW"의 형태이다.

위와 같이   as keyof typeof   을 사용하여 "RED"에 해당하는 색상 코드를 가져와 span의 배경색으로 할당했다.

 

 

[ 예시 코드2 ]

 

enum.ts

export const enumRole = {
  FULL_TIME: "직원",
  PART_TIME: "알바",
  MANAGER: "매니저",
} as const;

import * as enumType from "../../../commonType/enum";

const manage = () =>{
  ...
  return (
    <div>...
      <span>
        { 
          enumType.enumRole[
            item.role as keyof typeof enumType.enumRole
          ]
        }
      </span>
    </div>
  )
}

item.role은 서버에서 보내주는 직원에 대한 직급 정보로 "FULL_TIME", "MANAGER"의 형태이다.

위와 같이   as keyof typeof   를 사용하여 "MANAGER"에 해당하는 직급명을 가져와 span의 innerText로 할당했다.

 

 

참고
https://engineering.linecorp.com/ko/blog/typescript-enum-tree-shaking/