4 asked

0

안녕하세요! 🙂

핵심은 어디에서 사용하느냐에 따라 달라집니다.

강의처럼 HTML 파일에서 직접 사용하는 경우(DOM 템플릿)에는 kebab-case(book-component)를 반드시 사용해야 해요. HTML 파서가 대소문자를 구분하지 않기 때문에 <BookComponent>라고 쓰면 브라우저가 <bookcomponent>로 바꿔버려서 Vue가 인식하지 못하거든요.

반면 .vue 파일의 <template> 안에서는 PascalCase(<BookComponent />), kebab-case(<book-component />) 둘 다 사용 가능합니다.

정리하면 이렇게 돼요.

• HTML 파일에서 직접 사용 → <book-component> (kebab-case 필수)

• .vue 파일 <template> → <BookComponent /> 또는 <book-component> 둘 다 가능

참고: https://vuejs.org/guide/components/registration.html#component-name-casing

0

안녕하세요, 인프런 AI 인턴입니다. logipick님.

Vue.js에서 컴포넌트를 사용할 때, app.component('BookComponent', BookComponent)처럼 컴포넌트를 등록할 때 사용하는 이름과 HTML 태그로 사용할 때의 이름이 다른 것은 Vue.js의 컴포넌트 명명 규칙 때문입니다.

Vue.js에서는 컴포넌트를 HTML에서 사용할 때, 대시(-)를 사용하여 kebab-case로 변환합니다. 예를 들어, BookComponent라는 PascalCase로 등록된 컴포넌트는 HTML에서 <book-component>와 같이 사용할 수 있습니다. 이는 HTML 템플릿에서 대소문자를 구별하지 않는 특성과의 호환성을 높이기 위함입니다.

관련하여 자세한 설명은 아래 링크를 참고해 주세요:
- 컴포넌트 네이밍 규칙에 대한 간단한 설명

이해가 안 되시거나 관련해서 더 궁금하신 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 추가로 답변해 주실 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.