[Vue3&TypeScript] if문을 줄이고 코드의 가독성과 유지보수성을 높이기 위한 방법들 예제 코드 포함(includes, has) : TypeScript Set 객체 사용법

방법 1: Set 자료구조 활용 (추천)

다음은 TypeScript 에서 Set 객체를 생성하는 코드이다.

const invalidStatusSet = new Set(['0310', '0311', '0312', '0399', '0611']);

if (invalidStatusSet.has(selectedData.value.statusCd)) {
  alert("불가!!");
  return;
}

//이 Set은 아래와 같은 구조로 동작
Set(5) {
  '0310',
  '0311',
  '0312',
  '0399',
  '0611'
}

Set은 중복 없는 값들의 집합(Collection) 을 표현하는 내장 객체이다.

Set에 넣은 값들은 중복이 제거되며, 내부적으로는 고속 탐색이 가능하다.

Set은 검색 속도가 빠르며, 값 추가/삭제도 간단하다.

이후 상태가 추가될 경우 유지보수도 용이하다.

방법 2: 상태 의미를 Enum처럼 분리

const TerminatedStatuses = {
  GENERAL: '0310',
  BY_AUTHORITY: '0311',
  MOVED_OUT: '0312',
  BAD_CREDIT: '0399',
  NAME_CHANGE: '0611',
};

const invalidStatus = Object.values(TerminatedStatuses);

if (invalidStatus.includes(selectedData.value.statusCd)) {
  alert("불가!!");
  return;
}

코드 의미를 좀 더 문서화하고 싶을 때 유용합니다.

Enum-like 구조로 각 코드의 의미를 이름으로 명시함.

방법 3: 유틸 함수로 추출

function isTerminatedStatus(status: string): boolean {
  const terminated = ['0310', '0311', '0312', '0399', '0611'];
  return terminated.includes(status);
}

// 사용:
if (isTerminatedStatus(selectedData.value.statusCd)) {
  alert("불가!!");
  return;
}

도메인 지식이 녹아든 조건은 함수로 추출하는 게 가장 읽기 쉽고 재사용성도 좋다.

왜 Set을 쓰는가?

타입스크립트에서 타입 추론

const statusSet = new Set(['0310', '0311']);

타입스크립트는 위 코드에서 Set<string> 타입으로 추론한다.

원한다면 명시적으로 타입을 줄 수도 있다:

const statusSet: Set<string> = new Set(['0310', '0311']);