[Vue.js] Vue CLI 프로젝트 : 컴포넌트(Component) 등록과 사용

[Vue.js] Vue CLI 프로젝트 : 컴포넌트(Component) 등록과 사용

2022.02.11 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : Vue 파일 공부하기

지난 글에 이어서 글을 작성합니다.

 

이번 글에서는 Vue 컴포넌트(Component)를 등록하고 사용하는 방법을 알아보겠습니다.

 

# 컴포넌트를 사용하는 방법 1

먼저 Vue CLI 프로젝트 구조에서 App.vue 파일과 같은 위치에 Home.vue라는 파일을 생성합니다.

Home.vue 파일은 다음과 같이 작성합니다.

그리고 App.vue 파일로 돌아와서 <script> 태그 제일 상단에 위에서 만든 home 컴포넌트에 대한 정보를 입력합니다.

import homeComponent from "./home.vue"

여기서 homeComponent는 변수의 이름으로 사용된다고 보면 되기 때문에 이름은 다르게 해도 됩니다. 같은 폴더 내에 생성을 하였으니 상대 경로로 home.vue 파일을 불러옵니다. (이때 확장자. vue는 생략이 가능합니다.)

homeComponent를 가져왔고, App.vue 파일의 <template> 태그내에서 homeComponent를 사용을 하기 위한 선언 작업을 해줘야 합니다. 위에서는 쓸 수 있도록 불러온 것이지만, 실제로 Vue 개발에 사용하기 위해서는 컴포넌트로 선언 해주어야 합니다.

 

스크립트 태그 내에서 export default { } 안에 components : { homeComponent } 를 사용한 것이 보이는데, 이 작업이 homeComponent를 '컴포넌트' 사용을 위한 선언으로 볼 수 있습니다.

<template> 태그 안에서는 HTML 태그처럼 등록된 homeComponent를 사용할 수 있습니다.

<template>
  <div>
    <h1>{{ title }}</h1>
    <h1>{{ cnt }}</h1>
    <button @click="cnt++">증가</button>
    <home-component></home-component>
  </div>
</template>

 

결과 이미지

위 세 줄은 App.vue 에 작성된 내용이고, 네 번째 줄은 Home.vue에 작성된 내용입니다.

 

 

# 컴포넌트를 사용하는 방법 2 (전역 컴포넌트)

다음은 전역으로 컴포넌트를 등록해서 사용하는 방법을 알아보겠습니다. Status.vue 라는 파일을 App.vue, Home.vue와 같은 위치에 생성합니다.

 

Status.vue 파일을 간단하게 작성합니다.

# 전역 컴포넌트는 main.js에 import 합니다. (가져오기)

# 해당 컴포넌트를 Vue에 등록해줍니다. createApp.component('AppStatus', statusComponent)

# 첫 번째 인자는 전역 컴포넌트로 사용할 명칭을 입력합니다.

# 두 번째 인자는 import로 갖고 온 컴포넌트를 사용할 수 있도록 선언할 컴포넌트 변수(옵션)입니다.

다시 App.vue 파일로 이동한 다음 전역 컴포넌트 명칭으로 설정된 AppStatus 컴포넌트 태그를 사용해 보이도록 합니다.

결과는 어떻게 되었을까요?

전역으로 등록한 컴포넌트 역시 제대로 된 결과를 보이고 있습니다.

 

Home.vue 파일에 전역 컴포넌트 AppStatus를 추가하면 '홈 입니다.' 가 출력되는 곳 위아래로 출력되는 것이 확인될 것입니다.

---

이번 글에서는 Vue CLI 프로젝트에서 컴포넌트의 등록과 사용에 대해서 알아보았습니다. 등록과 사용 방법이 2가지가 있었고요. 파일에 등록하는 방법과 전역으로 등록하는 방법이 있었습니다. 글이 도움이 되셨다면, 좋아요! 구독! 광고 클릭! 해주시면 저에게 큰 힘이 됩니다! 감사합니다.^^