Vue.js - 전역/지역 컴포넌트 개념 및 생성

 

1. 컴포넌트(Component)의 개념

 

 

기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는 데 도움이 됩니다. 상위 수준에서 컴포넌트는 Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트입니다. 경우에 따라 특별한 is 속성으로 확장된 원시 HTML 엘리먼트로 나타날 수도 있습니다.

 

Vue 컴포넌트는 Vue 인스턴스이기도 합니다. 그러므로 모든 옵션 객체를 사용할 수 있습니다. (루트에만 사용하는 옵션은 제외) 그리고 같은 라이프사이클 훅을 사용할 수 있습니다.

 

위와 같이 Vue.js 공식 홈페이지에는 알려주고 있습니다.

 

출처 :  https://kr.vuejs.org/v2/guide/components.html

 

저는 이 그림을 보면서 이해하기가 쉬웠습니다.

위 그림과 같이 하나의 화면을 적절하게 분리하여 (화면 또는 기능) 블록화 하며 여기서 하나하나의 블록이 컴포넌트(Component)입니다.

 

그래도 혹시나 이해하기가 어려우시다면,

하드웨어를 예로 들어 설명 참조를 하겠습니다.

 

많은 하드웨어 제품들은 각각 독립된 기능을 가진 모듈로 만들어집니다.

이 제품들은 회사 상관없이 서로 조합하여 하나의 제품으로 만들어집니다.

이러한 제품들의 부품은 문제가 발생했을 시,

해당 부품만 다른 부품으로 바꾸어도 제품은 문제가 없이 작동합니다.

 

위와 같이, 컴포넌트는 하나의 독립된 기능을 하는 부품이며 각각 독립된 모듈을 뜻한다고 생각하니 이해하기가 한결 수월해졌습니다.

 

 

---

 

2. 뷰 컴포넌트(Vue Component) 생성 및 사용

 

 

뷰 컴포넌트는 전역 컴포넌트와 지역 컴포넌트 두 가지가 있습니다.

 

- 전역(Global) 컴포넌트 : 여러 인스턴스에서 공통으로 사용할 수 있는 컴포넌트

- 지역(Local) 컴포넌트 : 특정 인스턴스에서만 유효한 범위를 가짐

 

더 쉽게 설명하자면, 지역은 특정 범위 내에서만 사용할 수 있고, 전역은 뷰로 접근 가능한 모든 범위에서 사용할 수 있습니다.

 

 

① 전역 컴포넌트 등록 및 호출

 

전역 컴포넌트는 뷰 라이브러리 로딩하고 나면 접근 가능한 Vue 변수를 이용하여 등록합니다.

전역 컴포넌트를 모든 인스턴스에 등록하려면 Vue 생성자에서 .component()를 호출하여 수행하면 됩니다.

 

등록 방법 :

Vue.component('컴포넌트 이름', '옵션') 

컴포넌트 이름 : 이 컴포넌트를 사용하기 위한 이름입니다.

옵션 : 컴포넌트를 렌더링 할 때 필요한 여러 옵션들을 작성합니다.

 

 

1) 사용할 컴포넌트 작성 (GlobalComponent.vue)

<template>
  <div>
    <button @click="showTitle">
        전역 컴포넌트 클릭해보세요. 아래에 글씨가 나옵니다.
    </button>
    <br>
    <span class="span">{{ title }}</span>
  </div>
</template>
 
<script>
export default {
  name: 'GlobalComponent',
  data () {
    return {
      title: ''
    }
  },
  methods: {
    showTitle () {
      this.title = 'Global Component TEST !!'
    }
  }
}
</script>
 
<style>
.span {
  margin-top:20px;
  color:red;
}
</style>

 

 

2) 가장 먼저 실행되는 스크립트를 수정한다. Vue 인스턴스를 생성할 때 전역 컴포넌트를 선언합니다. (main.js)

/** 사용할 컴포넌트 파일 Import */
import GloablComponent from '@components/kim/GlobalComponent'
 
 
/** Vue 생성자에 component 선언 */
Vue.component('GlobalComponent', GloablComponent)

 

 

3) view 파일에서 등록한 전역 컴포넌트 호출 (TestVueComponent.vue)

 

컴포넌트를 호출 시, main.js에 등록한 Component의 이름으로 태그 형식으로 작성하여 호출합니다.

전역 컴포넌트는 위치와 상관없이 어디서든 호출이 가능하기 때문에, 해당 파일이 아니더라도 아래의 태그로 다른 파일에서도 호출이 가능합니다.

<template>
  <div>
    <ul>
      <li><GlobalComponent /></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</template>

 

 

 

 

 

 

② 지역 컴포넌트 등록 및 호출

 

지역 컴포넌트 등록은 전역 컴포넌트 등록과는 다르게 인스턴스에 components 속성을 추가하고 등록할 컴포넌트 이름과 내용을 정의합니다.

 

 

1) 사용할 컴포넌트 작성 (LocalComponent.vue)

<template>
  <div>
    <button @click="showTitle">
        여기를 클릭해보세요. 지역 컴포넌트가 출력됩니다.
    </button>
    <br>
    <span class="local_span">{{ title }}</span>
  </div>
</template>
 
<script>
export default {
  name: 'LocalComponent',
  data () {
    return {
      title: ''
    }
  },
  methods: {
    showTitle () {
      this.title = 'Local Component TEST !!'
    }
  }
}
</script>
 
<style scoped>
.local_span {
  margin-top:20px;
  color:blue;
}
</style>

 

 

2) view 파일에서 지역 컴포넌트를 등록하고 호출 (TestVueComponent.vue)

 

컴포넌트 이름은 전역 컴포넌트와 마찬가지로 HTML에 등록할 사용자 정의 태그를 의미하고, 컴포넌트 내용은 컴포넌트 태그가 실제 화면 요소로 반환될 내용을 의미합니다.

 

<template>
  <div>
    <ul>
      <li><GlobalComponent /></li>
      <li><localComponent /></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</template>
 
<!-- 지역 컴포넌트 사용하기 -->
<script>
import localComponent from '@components/kim/LocalComponent'
 
export default {
  components: {
    localComponent
  }
}
</script>
 
<style>
li {
  padding:20px;
  border-bottom:1px solid #aaa;
  text-align:center;
  cursor:pointer;
}
</style>

 

---

 

3. 뷰 컴포넌트(Vue Component) 결과

 

전역 컴포넌트와 지역 컴포넌트를 생성하였고,

내가 등록한 컴포넌트의 내용들이 출력이 되는지 확인해보겠습니다.

 

 

 

그럼 컴포넌트에 클릭 메소드를 등록하였으니, 클릭하여 확인해보겠습니다.

 

 

 

전역 컴포넌트와 지역 컴포넌트를 등록하고 호출 완료 ! 

 

---

 

*다른 페이지에서 지역 컴포넌트와 전역 컴포넌트 호출

<template>
  <div>
    <div>
        <localComponent />
    	<GlobalComponent />
    </div>
  </div>
</template>

 

 

지역 컴포넌트와 전역 컴포넌트를 호출하였지만

해당 파일에서 선언된 지역 컴포넌트는 없기 때문에 호출되지 않았고,

전역으로 등록한 컴포넌트는 호출되는 것이 확인 완료.

 

 

---