🔴 typesciprt 선언
오전 팀 스크럼 과정에서 enum타입에 대한 얘기가 나왔습니다. 프론트엔드 파트장님께서 enum 사용을 지양하고 const enum으로 변경해야 한다는 내용이였습니다. 그 때 당시에 enum타입을 잘 모르는 상태였기에 무슨 말을 하는 것인지 잘 몰랐고 이에 대해 알아보게 되었스니다.
기존의 js에서 무언가를 정의하기 위해서는 var, let, const를 사용합니다. 여기서 const를 이용하여 변수를 선언하게 되면 이 값은 상수처럼 변경할 수 없는 상태가 되어 변수의 오염을 막아주는데 유용합니다.
const zero = 0
const one = 1
const two = 2
const three = 3하지만 이렇게 변수를 하나씩 지정하게 되면 여기에 type 또한 하나씩 달아줘야 합니다.
const zero : number = 0
const one : number = 1
const two : number = 2
const three : number = 3이렇게 작성해주는 것이 과연 현명한 방법이라고 할 수 있을까요?? typescript는 이에 명명된 상수의 집합의 type을 지정해주는 enum을 도입했습니다.
🟠 enum 타입
enum Responses{
no = "No",
yes = "Yes",
maybe = "Maybe"
}
enum Data {
no = 0,
yes = 10,
maybe = 24
}
enum MixedData {
one = 1,
two = 2,
three = 3,
four = "four"
}enum을 선언하고 내부에 상수의 타입을 지정하지 않고 값을 할당할 수 있습니다. 그럼 이번에는 enum내부에 값을 따로 설정하지 않아보겠습니다.
enum Data {
zero,
one,
two,
three,
}
그림과 같이 커서를 대면 값이 임의로 배열 index처럼 할당 된 것을 확인할 수 있었습니다. 또한 객체형식처럼 값에 접근하며 자동완성 기능까지 보유하고 있습니다. 코드 내부에서 재사용이 가능하다는 말입니다.
🟡 enum의 이면??
지금까지 enum을 살펴보았을 때 기능적으로 가독성이 높아지며 따로 별도의 type지정을 해주지 않아서 편리하다는 느낌을 받았습니다. 그런데 많은 개발자들은 enum으로 인해 code가 복잡해질 수 있다는 데에 포커스를 맞췄습니다. 아시다시피 typesciprt자체만으로 브라우저는 인식을 할 수 없습니다. javascript로 변환하는 과정을 통해 브라우저가 이를 인식하게 되는 것입니다. 기존의 type설정에서 typescript는 컴파일 과정에서 제거되는 것과는 달리 enum타입은 추가적인 코드를 발생시킵니다.
다음과같이 typescript playground에서 javascript로 변환시 enum타입은 추가적인 코드를 발생시키는 것을 알 수 있습니다. 객체를 생성하고 키과 값을 지정하고 함수를 발생시키고 있습니다.
이렇게 추가적인 코드를 발생시키는 것은 성능이 떨어집니다. 실제로 이렇게 발생한 코드는 tree-shaking이 되지 않아 실제 최종 번들러에 포함이 되어 성능 저하가 발생합니다.
const enum
enum은 typescript에서 초창기에 만들었고 추가적인 코드를 발생시킨다는 면에서 개선해야할 부분이 많았습니다. enum의 장점을 그대로 가져가고자 const enum이 탄생하게 되었습니다. enum앞에 const는 얼핏보게 되면 javascript에서 함수나 변수를 선언하기 위한 것처럼 보이지만 이는 이와는 전혀 다른 키워드 입니다. const키워드는 enum으로 설정한 존재 자체를 모두 삭제해 버립니다.
그림과 같이 enum지정시 생겼던 객체나 함수가 사라졌으며, data를 할당할 때 enum타입 값에 접근이 가능합니다.
이는 실제 javascript코드를 추가적으로 생성하는 것이 아니기 때문에 enum의 장점을 살렸다고 볼 수 있습니다. 하지만 그냥 일반적인 객체를 생성해서 타입을 지정해주는 것이 더 좋다고 보는 사람도 있고, stack overflow나 reddit에서 또한 enum이 크게 장점이 있다고 보기 힘들다는 의견이 있습니다.
reference
https://engineering.linecorp.com/ko/blog/typescript-enum-tree-shaking
https://velog.io/@jay/typescript-enum-be-careful
👍올바른 피드백은 언제든지 환영입니다~!
