컴포넌트에 대해서

Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"

작성

444

안녕하세요. 강의 잘 들었습니다. 1번 듣고 한번 더 들으며서 복습중인데요,

컴포넌트 이해하기 강의에서요,

아래와 같이 컴포넌트를 등록하고,

app.component("BookComponent", BookComponent);

위에서 컴포넌트 사용한다고 했구요

<book-component></book-component>

여기서 궁금한 것이 컴포넌트명이 book-comppnent 라고 했는데

위에서는 <book-component> 라고 작성을 하는데 ....규칙이 있는건지요

아님 아래에서 만든 컴포넌트명을 그대로 작성하면 안되는건지요

사용할땐 대시를 입력하는 규틱인건지...

답변 1

지식공유자

안녕하세요 :)

Vue는 PascalCase를 사용하여 등록된 컴포넌트에 대한 kebab-case 태그 해석을 지원합니다.

그리고 Vue3 공식문서에서는 PascalCase를 사용하여 기본 HTML 요소가 아닌 Vue 컴포넌트임을 더 분명하게 할 수 있다고 가이드하고 있습니다. 관련내용 링크

PascalCase, kebeb-case 는 팀마다 네이밍 룰이기 때문에 팀에서 정한 규칙으로 가시면 될 것 같습니다.

또한 수업에서 <book-component>를 kebab-case로 사용한 이유는
싱글 파일 컴포넌트가 아니기 때문에 kebab-case를 사용하였습니다. 관련내용 링크

저의 경우 제가 만든 컴포넌트는 PascalCase 규칙을 따르고 있습니다.

감사합니다.

질문자

아 자세한 설명 감사드립니다.

인프런 커뮤니티 질문&답변