[HTML, VUE] Boolean Attribute

Boolean attribute

• Vue 개발을 진행하다가 컴포넌트를 만들고, 그에 props로 속성을 내려줄 때 attribute, 속성명만 작성해도 자식 컴포넌트에서 true 로 인식하였다.

  [ Parent.vue ]
  <ChildComponent readonly>
  
  [ ChildComponent.vue ]
  const props = defineProps({
  	readonly: { type: Boolean, default: false }
  })
  console.log(props.readonly) // true

• 즉, 어떻게 그냥 바로 이렇게 처리되는걸까?
  • Vue에서 props로 넘길 때 바인딩처리해서(:readonly=true) 로 해야되지 않을까?
  • 결론부터 하자면 그렇지 않다.

HTML Boolean attribute

• Boolean attribute는 HTML에서 true나 false값으로 표현되는 속성들을 말한다.

  • 태그 안에 속성으로 있으면 true, 없으면 false로 자동 반영한다.

  • 대표적인 예시가 input이 있다.

    <input type="checkbox" checked />
    // 위와 같이 설정하면 checked에서 true로 인식한다.
    <input type="checkbox" disabled />
    // disabled도 위와 같은 예시이다.

Vue의 Boolean attribute

• HTML을 기반으로 적용되는 개념이 Vue에서도 동일하게 시스템적으로 속성 평가를 진행하기 때문에 위와 같은 예시, true로 넘겨줄 때 바인딩을 할 필요가 없는 이유이다.

• 즉, HTML표준과 일치하게 만들며 편의성을 높이기 위함이다.

• 물론 바인딩해서 처리해도 되긴한다. 뭐 false가 필요할때나 아니면 직관적으로 보이게 하고 싶을 때도 그럴 수는 있다.

• 어떻게보면 그냥 단순하게 문법처럼 보여서 그대로 사용했었지만, 표준이라든지 어떤 이유를 알아보고자 작성하였다.