[VueJS] props use camelCase Error : Note that HTML attributes are case-insensitive and camelCased props need to use their kebab-case equivalents when using in-DOM templates.

vueJS에서 compoent를 사용하게 되면 props라는 속성을 사용하게 되는데

누구나 한번쯤은 겪을만한 이 에러에 대해 알아보자.

 

props를 사용할 때 아무생각 없이 camelCase를 사용하게 되면 아래와 같은 에러가 발생한다.

Note that HTML attributes are case-insensitive and camelCased props need to use their kebab-case equivalents when using in-DOM templates.

 

그냥 쉽게 말해서 카멜케이스를 사용하고싶으면 케밥케이스를 사용해라 라는 의미인데

Vue 공식 홈페이지에서 다음과 같이 안내를 해주고 있다.

HTML 어트리뷰트는 대소문자 구분이 없기 때문에 브라우저는 대문자를 소문자로 변경하여 읽습니다. 그렇기 때문에 카멜 케이스(대소문자 혼용)로 prop의 이름을 정한 경우에 DOM 템플릿 안에서는 케밥 케이스(하이픈으로-연결된-구조)를 사용하여야 올바르게 동작합니다.

 

역시 말로 설명하면 잘 모르니 예제 코드를 통해 접해보자.

---

▷ 예제1) props의 올바른 사용법

Vue.component('blog-post', {
// JavaScript에서의 camelCase
props: ['postTitle'],
        template: '<h3>{{ postTitle }}</h3>'
})

<!-- HTML에서의 kebab-case -->
<blog-post post-title="hello!"></blog-post>

 

위에서 설명한 것을 풀어서 말하자면,

HTML 어트리뷰트는 대소문자 구분이 없어 항상 소문자로 변경하여 읽기때문에 케밥(-) 케이스를 사용하라는 설명이다.

 

예제 처럼 html 영역에서는 케밥케이스를 쓰고,

component 영역에서는 카멜케이스를 사용해 서로 연결하여 사용이 가능하다.

 

참고 : https://kr.vuejs.org/v2/guide/components-props.html 

Props — Vue.js