[Vue3] type: String as PropType와 validator 차이점

type: String as PropType와 validator를 사용하는 방식은 타입 정의와 값 검증의 차이에 따라 적합한 상황이 다릅니다. 아래는 두 방법의 차이를 정리한 내용입니다.

---

1. type: String as PropType의 특징

• 주로 TypeScript를 사용하는 경우:
  • PropType을 사용하면, TypeScript가 제공하는 정적 타입 검사 기능을 통해 컴파일 타임에 허용되는 값의 범위를 명확히 정의할 수 있습니다.
  • IDE에서 자동 완성 및 타입 오류를 바로 확인할 수 있습니다.
• 사용 예시:

size: {
  type: String as PropType<'small' | 'medium' | 'large'>,
  default: 'medium',
}

• 장점:
  • 타입 안전성을 제공하며, 런타임에 추가 검증 코드가 필요 없습니다.
  • TypeScript의 타입 추론과 완전히 통합됩니다.
• 단점:
  • 프로젝트에서 TypeScript를 사용하지 않는 경우 동작하지 않습니다.
  • 런타임에서 값 검증을 수행하지 않으므로 TypeScript를 사용하지 않을 경우 유효성 검사 부족.

---

2. validator의 특징

• 주로 JavaScript만 사용하는 경우:
  • validator는 런타임에 전달된 값이 유효한지 검증합니다.
  • TypeScript 없이도 동작하며, 런타임에서 명시적으로 값을 확인할 수 있습니다.
• 사용 예시:

size: {
  type: String,
  default: 'medium',
  validator: (value) => ['small', 'medium', 'large'].includes(value),
}

• 장점:
  • TypeScript를 사용하지 않는 경우에도 안전하게 값을 검증할 수 있습니다.
  • 사용자 정의 검증 로직을 쉽게 작성할 수 있습니다.
  • 유효하지 않은 값이 전달되면 경고 메시지가 출력됩니다.
• 단점:
  • 검증은 런타임에만 수행되므로, 컴파일 타임에는 오류를 잡을 수 없습니다.
  • IDE 자동 완성이나 타입 추론을 제공하지 않습니다.

---

3. 주요 차이점 요약

측면 type: String as PropType validator

적합한 환경	TypeScript 사용 프로젝트	JavaScript만 사용하는 프로젝트
타입 검사 시점	컴파일 타임	런타임
오류 검출	컴파일 타임에 정확한 타입 오류를 제공	런타임에 유효하지 않은 값에 대해 경고 출력
사용자 정의 로직	불가능	가능
IDE 지원	자동 완성, 타입 추론 등 강력한 지원	제한적

---

어떤 방식을 선택해야 하나요?

• TypeScript 사용 중: PropType 사용 권장 (정적 타입 검사 제공).
• JavaScript 사용 중: validator 사용.
• 복잡한 검증 로직이 필요한 경우: validator 사용, TypeScript와 조합 가능.

필요한 상황에 따라 두 방식을 혼합하여 사용할 수도 있습니다! 😊