필자는 서버API 를 통해 응답받는 데이터 중 code 데이터들에 대한 값 비교와 같은 일을 직관적으로 작성해서 추 후 유지보수 때 가독성을 높이기 위해 code 상수를 만들어서 관리하는 편이다.
예를 들면 서버에서 응답받는 상태값(stateCd) 이 001 이라는 값이라고 가정해보면
if (result.stateCd === '001') {
alert('유형1');
}와 비슷한 코드로 작성할 것이다.
하지만 추 후 다른 개발자가 유지보수를 하거나, 오랜 시간이 지난 후에 본인이 직접 봐도 001 이 어떤 값인지 헷깔리는 경우가 많기 때문에 상수로 만들어서 가독성을 높이는 경우가 많이 있을 것이다. 예를 들면,
// 1. 객체 프로퍼티
const STATE_CD = {
type001: '001',
type002: '002',
} as const;
// 2. enum
const enum STATE_CD {
type001 = '001',
type002 = '002',
};
// ---실제 사용(둘 중 선택)---
if (result.stateCd === STATE_CD.type001) {
alert('유형1');
}키 값을 이해하기 쉬운 이름으로 작성한다면 향 후에도 알아보는 것은 어렵지 않을 테니까.
하지만 또 우리 개발자는 저 한글조차도 객체에 담아서 편하게 꺼내쓰고 싶을 것이다.
혹시 모를 selectbox의 옵션항목에 들어갈 것 까지 고려하고 상대적으로 더 친숙한 객체형을 사용하는 편이다. (이 부분은 개인스타일)
const STATE_CD = {
TYPE001: {
label: '유형1',
value: '001',
},
TYPE002: {
label: '유형2',
value: '002',
}
} as const;
// --- 실제 사용 시 ---
if (result.stateCd === STATE_CD.TYPE001.value) {
alert(STATE_CD.TYPE001.label);
}
등록, 수정 혹은 검색 파라미터로 api로 넘겨야한다면 타입 생성도 중요하다.
type StateCdType = '001' | '002';
interface IPostRequest {
// ...
stateCd: StateCdType;
// ...
}하지만 이미 객체 상수 프로퍼티 내에 모두 있는 값인데 이걸 과연 또 써줘야할까?
필자 같은 경우는 객체 상수의 프로퍼티를 활용해서 재사용하는 방식을 주로 사용한다.
// initial type: '001' | '002'
type StateCdType = typeof STATE_CD[keyof typeof STATE_CD]['value'];
위 타입을 가져오는 원리는 간단하다.
타입스크립트에는 keyof 라는 연산자가 있다. 특정 타입의 key 를 가져오는 것이다. 하지만 객체의 경우는 javascript 의 typeof 를 통해 타입을 한번 꺼내와야 keyof 를 사용할 수 있다.
객체 상수의 typeof 와 keyof typeof
객체의 키를 keyof typeof 를 통해 가져왔다면 객체 내의 value(객체)에 대한 타입도 가져올 수 있다.
이렇게 해당 타입을 가져오게 된다면 label 과 name 으로 이루어진 객체에 대한 타입을 확인할 수 있고, 실제 요청에 들어갈 타입(코드값)을 뽑아낼 땐 해당 타입에서 원하는 키 값만 써주면 된다.
코드 타입을 지정하는 많은 방법이 있겠지만 필자가 사용하는 방법은 위 처럼 사용하고, 혹시 enum 으로 위와 같이 만들 수 있는 방법이 있다면 공유 부탁드립니다~