blog

HTML 불리언 속성과 Vue의 Boolean prop 캐스팅

Front-end / Vue#HTML#Vue#props#Boolean

<VueDatePicker auto-apply inline />처럼 값 없이 쓴 속성이 왜 true로 동작하는지 정리했다. 이것은 프로그래밍 언어의 불리언 리터럴(true/false)과는 다른 개념으로, HTML의 불리언 속성과 Vue의 Boolean prop 캐스팅 규칙이다.

1. HTML 불리언 속성

checked, disabled, readonly 같은 불리언 속성은 속성이 존재하는지로 참·거짓이 결정된다. 값은 의미가 없다.

<input type="checkbox" checked>          <!-- 체크됨 -->
<input type="checkbox" checked="">       <!-- 체크됨 -->
<input type="checkbox" checked="false">  <!-- 체크됨 (주의!) -->
<input type="checkbox">                  <!-- 체크 안 됨 -->

checked="false"도 속성이 존재하므로 체크된 상태가 된다. 끄려면 속성 자체를 빼야 한다.

2. Vue 컴포넌트의 Boolean prop

Vue는 prop의 타입이 Boolean으로 선언되어 있을 때만 값 없는 속성을 true로 변환한다.

<script setup>
defineProps({
  autoApply: Boolean,
  label: String,
});
</script>

<MyPicker auto-apply />   <!-- autoApply === true -->
<MyPicker />              <!-- autoApply === false (Boolean prop은 생략하면 false) -->
<MyPicker label />        <!-- label === '' (String prop은 빈 문자열) -->

타입이 Boolean이 아니면 값 없는 속성은 빈 문자열('')로 전달된다. 라이브러리 컴포넌트에서 auto-apply처럼 쓸 수 있는 것은 해당 prop이 Boolean으로 선언되어 있기 때문이다.

3. false나 동적 값을 넘길 때

문자열이 아닌 값을 넘기려면 v-bind(:)를 사용한다. auto-apply="false"로 쓰면 문자열 "false"가 전달된다.

<VueDatePicker :auto-apply="false" />
<VueDatePicker :auto-apply="isAutoApply" :inline="isInline" />

요약

  • HTML 불리언 속성은 존재 여부로 결정되고, 값("false" 포함)은 무시된다.
  • Vue에서 값 없는 속성이 true가 되는 것은 prop 타입이 Boolean일 때뿐이다.
  • false나 변수를 넘기려면 :prop="..."으로 바인딩한다.