[Vue] 컴포넌트 등록 방법 및 네이밍 규칙

Vue.js 컴포넌트 사용법: 컴포넌트 생성과 등록

개요

Vue.js에서 컴포넌트를 사용하면 코드를 재사용 가능한 단위로 나누어 관리할 수 있습니다. 이 글에서는 컴포넌트를 생성하고, import하고, 등록하는 방법에 대해 알아보겠습니다.

1. 컴포넌트 파일 생성

디렉토리 구조

src/
├── App.vue
└── components/
    └── AppHeader.vue

새로운 컴포넌트 파일 생성

/components 폴더 아래에 새로운 Vue 컴포넌트 파일을 생성합니다.

AppHeader.vue

<template>
    <h1>앱 헤더</h1>
</template>

<script>
    export default {

    }
</script>

<style scoped>

</style>

2. 컴포넌트 Import 방법

부모 컴포넌트에서 자식 컴포넌트를 사용하려면 먼저 import해야 합니다.

<script>
import AppHeader from './components/AppHeader.vue'

export default {
  // 컴포넌트 등록 및 기타 옵션들...
}
</script>

Import 경로 설명

• ./components/AppHeader.vue: 현재 파일 기준으로 components 폴더의 AppHeader.vue 파일
• .vue 확장자는 생략 가능하지만, 명시적으로 작성하는 것이 좋습니다.

3. 컴포넌트 등록 방법

방법 1: components 옵션 사용 (권장)

<script>
import AppHeader from './components/AppHeader.vue'

export default {
  components: {
    "AppHeader": AppHeader
  },
  // 기타 옵션들...
}
</script>

방법 2: 축약형 사용

key와 value가 같을 때는 하나만 작성할 수 있습니다.

<script>
import AppHeader from './components/AppHeader.vue'

export default {
  components: {
    AppHeader  // "AppHeader": AppHeader와 동일
  },
  // 기타 옵션들...
}
</script>

4. 컴포넌트 Naming 규칙

템플릿에서 사용할 이름

컴포넌트를 등록할 때 지정한 이름으로 템플릿에서 사용합니다.

<template>
  <AppHeader />
  <div>
    {{ message }}
  </div>
  <button @click="showAlert">hi??</button>
</template>

Naming 규칙 정리

1. 파일명 규칙

• PascalCase: AppHeader.vue, UserProfile.vue (권장)
• kebab-case: app-header.vue, user-profile.vue

2. 컴포넌트 등록명 규칙

• PascalCase: AppHeader, UserProfile (권장)
• kebab-case: app-header, user-profile

3. 템플릿에서 사용할 때

• PascalCase: <AppHeader />, <UserProfile />
• kebab-case: <app-header />, <user-profile />

권장 Naming 규칙

<!-- 파일명: AppHeader.vue -->
<!-- 등록명: AppHeader -->
<!-- 사용: <AppHeader /> -->

<script>
import AppHeader from './components/AppHeader.vue'

export default {
  components: {
    AppHeader  // PascalCase 권장
  }
}
</script>

<template>
  <AppHeader />  <!-- PascalCase 권장 -->
</template>

실제 예제 분석

App.vue (부모 컴포넌트)

<template>
  <AppHeader />
  <div>
    {{ message }}
  </div>
  <button @click="showAlert">hi??</button>
</template>

<script>
import AppHeader from './components/AppHeader.vue'

export default {
  components: {
    "AppHeader": AppHeader
  },
  data() {
    return {
      message: "안녕하세요."
    }
  },
  methods: {
    showAlert() {
      alert("hi!!");
    }
  }
}
</script>

AppHeader.vue (자식 컴포넌트)

<template>
    <h1>앱 헤더</h1>
</template>

<script>
export default {

}
</script>

개발 팁

1. 컴포넌트 파일 위치: 관련된 컴포넌트들은 /components 폴더에 정리하기.
2. Naming 일관성: 프로젝트 전체에서 일관된 naming 규칙을 사용하기.
3. 축약형 활용: key와 value가 같을 때는 축약형을 사용하여 코드를 간결하게.
4. 컴포넌트 분리: 재사용 가능한 UI 요소들은 별도 컴포넌트로 분리하기.

결론

Vue.js에서 컴포넌트를 사용하면 코드의 재사용성과 유지보수성을 크게 향상시킬 수 있습니다. 올바른 import, 등록, naming 규칙을 따르면 더욱 체계적인 애플리케이션을 구축할 수 있습니다.

다음 포스트에서는 컴포넌트 간 데이터 전달(props, emit)에 대해 다루어보겠습니다.