React

타입스크립트 enum 사용법? State를 만들 때 사용한다.

Asset Type
File Type
When to use
Reference
Created by
Last edited time
2022/03/13 16:07
테스트 코드로 todo 앱을 만들면서 본 코드다. 타입스크립트 기반이라 enum을 보게 되었다.
타입스크립트를 오직 타입을 선언하는데만 사용해왔었는데 타입스크립트 공부를 각잡고 해본 적이 없어서 그런듯하다. 자바스크립트 공부는 안하고 리액트만 했던 거랑 비슷하다.
참고할 수 있는 블로그를 찾았다.
간단하게 요약해본다. 추가적으로 책을 사서 학습할 예정이다.

My Status

Status를 정의한다. status는 number로 해야할까 string으로 해야할까?
근데 상태를 string으로 정의했더니만 내가 원하지 않는 상태가 string 타입이라 할당되어질 수가 있다!
즉, 범위가 너무 넓다.
이럴 때 Union과 String Literal Types를 사용해서 범위를 좁힌다.
type MyStatus = ‘자는중’ | ‘공부중’ const status : MyStatus = ‘자는중’
TypeScript
복사
그런데 또 문제가 있다. 백엔드에서 받아오는 값을 모두 정의해놓을 수가 없다!
object처럼 keyValue 쌍으로 가독성을 크게 높일 수 있다.
enum MyStatus { sleep = '자는중'; study = '공부하는중'; } const status : MyStatus = MyStatus.sleep;
TypeScript
복사
enum 덕에 변경에 대응하기 좋아진다. 왜냐하면 sleep이 ‘자는중'이 아니라 ‘수면중'이 된다면? 여기서만 바꿔주면 된다.

객체와의 차이

js의 object와 뭐가 다르지?
object는 새로운 속성 추가가 자유롭다. 하지만 enum은 선언 이후 변경이 불가능하다!
object의 속성값은 js가 허용하는 모든 타입이 올 수 있지만, enum의 속성값은 문자열 or 숫자만 허용된다!