인프런 커뮤니티 질문&답변
작성한 질문수
component 등록과 사용
작성
·
16
0
4분 53초쯤 app.component('BookComponent', BookComponent) 라고 등록을 하신건데 사용할 때는 왜 book-component 로 선언하시는건지 이해가 되지 않습니다.
답변 2
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 템플릿에서 대소문자를 구별하지 않는 특성과의 호환성을 높이기 위함입니다.
관련하여 자세한 설명은 아래 링크를 참고해 주세요:
- 컴포넌트 네이밍 규칙에 대한 간단한 설명
이해가 안 되시거나 관련해서 더 궁금하신 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 추가로 답변해 주실 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.