[Vue 3] Set default value to props

default-value.ts

// 1. destrcuting 사용
const {
  label = 'Normal Button',
  borderRadius,
  borderColor = 'transparent',
  backgroundColor = '#FF4800',
} = defineProps<Props>();
  
  
// 2. withDefaults 사용
const props = withDefaults(defineProps<Props>(), {
  label: 'Normal Button',
  borderColor: 'transparent',
  backgroundColor: '#FF4800',
});
  
  

1번 방법은 사용하면 안 된다. label이라는 key가 없을 때 기본 값이 설정되지 않기 때문!

const { label, borderRadius, borderColor, backgroundColor } = withDefaults(
  defineProps<Props>(),
  {
    label: 'Normal Button',
    borderColor: 'transparent',
    backgroundColor: '#FF4800',
  }
);