ksundev 님의 블로그

Vue의 Component 등록과 사용 본문

[개발] Vue.js/기본

Vue의 Component 등록과 사용

ksundev 2025. 6. 18. 15:08

Vue.js 컴포넌트 기초 - 컴포넌트 등록과 사용법

Vue.js에서 컴포넌트는 재사용 가능한 UI 요소를 만드는 핵심 개념입니다. 이번 포스트에서는 Vue 3에서 컴포넌트를 등록하고 사용하는 방법을 알아보겠습니다.

1. 컴포넌트란?

컴포넌트

컴포넌트는 독립적이고 재사용 가능한 UI 요소입니다. HTML, CSS, JavaScript를 하나로 묶어서 관리할 수 있게 해줍니다.

2. 컴포넌트 등록하기

Vue 3에서는 components 옵션을 사용해서 컴포넌트를 등록합니다.

Vue.createApp({
    components: {
        // '컴포넌트 이름': 컴포넌트 내용
        'app-header': {
            template: '<h1>컴포넌트 등록</h1>'
        }
    }
}).mount('#app');

3. 컴포넌트 사용하기

등록한 컴포넌트는 HTML 템플릿에서 사용할 수 있습니다.

<div id="app">
    <!-- 컴포넌트 표시(사용) -->
    <app-header></app-header>
</div>

4. 컴포넌트 명명 규칙 ⭐

Vue에서 컴포넌트 이름을 사용할 때는 중요한 규칙이 있습니다:

JavaScript에서 정의할 때:

  • PascalCase (첫 글자 대문자): AppHeader
  • camelCase: appHeader
  • kebab-case (하이픈으로 연결): app-header

HTML 템플릿에서 사용할 때:

  • kebab-case: <app-header> (권장)
  • PascalCase: <AppHeader> (가능)

예시:

// JavaScript에서 정의
components: {
    'AppHeader': { ... },      // PascalCase
    'appHeader': { ... },      // camelCase  
    'app-header': { ... }      // kebab-case
}
<!-- HTML에서 사용 -->
<app-header></app-header>      <!-- kebab-case (권장) -->
<AppHeader></AppHeader>        <!-- PascalCase (가능) -->

5. 완전한 예제 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js 컴포넌트 예제</title>
</head>
<body>
    <!-- HTML -->
    <div id="app">
        <!-- 컴포넌트 표시(사용) -->
        <app-header></app-header>
    </div>

    <!-- JavaScript -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        Vue.createApp({
            // 인스턴스 옵션 속성 - 옵션 API
            components: {
                // '컴포넌트 이름': 컴포넌트 내용
                'app-header': {
                    template: '<h1>컴포넌트 등록</h1>'
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

6. 주의사항

  1. HTML 태그와의 충돌 방지: HTML 기본 태그와 같은 이름을 사용하지 마세요.
  2. 일관성 유지: 프로젝트에서 하나의 명명 규칙을 일관되게 사용하세요.
  3. kebab-case 권장: HTML에서는 kebab-case 사용을 권장합니다.

7. 실행 결과

위 코드를 실행하면 브라우저에 "컴포넌트 등록"이라는 제목이 표시됩니다.

도움이 되셨나요? 다음 포스트에서는 Vue Component 통신 방식에 대해 알아보겠습니다.

'[개발] Vue.js > 기본' 카테고리의 다른 글

Vue의 Component 통신 방식 - 2. Event Emit  (0) 2025.06.19
Vue의 Component 통신 방식 - 1. Props  (0) 2025.06.18
v-for 디렉티브 사용하기  (1) 2025.06.18
Vue의 메서드(method) 사용하기  (1) 2025.06.16
Vue의 반응성(Reactivity) 시스템 이해하기  (0) 2025.06.16
'[개발] Vue.js/기본' Related Articles more