[Vue.js 시작하기] - 인스턴스 & 컴포넌트

저번글 (2020/12/20 - [Vue] - Vue.js 시작하기 - Vue.js 설치)에서 Vue.js 프로젝트를 하기위해 설치를 하였지만

Vue.js 코딩을 시작하기 위해서 알아야 할 기본적인 것들에 대해 설명을 해보려한다.

 

Instance

모든 Vue 애플리케이션의 필수, Vue 생성자로 인스턴스를 만드는 것부터 시작한다.

인스턴스를 생성할 때는 옵션 객체들을 전달해야하고 이는 사용자가 원하는 동작에 따라 다르다.

 

new Vue({
	//옵션들
})

 

Vue 앱은 new Vue를 통해 만들어진 Root Instance로 구성되고,

중첩이 가능하고 재사용이 가능한 컴포넌트 트리로 구성된다.

 

우리 프로젝트에 빗대어 표현하자면 이런 모양이 나오겠다.

 

Root Instance (main.js)

└─ 최상위 컴포넌트 (App.vue)

      ├─ 컴포넌트 A
      │      ├─ 컴포넌트 a

      │      ├─ 컴포넌트 b

      └─  컴포넌트 B

               └─  컴포넌트 c

 

Component

앞에서 계속 언급된 컴포넌트에 대해 모른다면 컴포넌트가 정확히 무엇인지 궁금할거라 생각된다.

 

인스턴스 : 레고를 조립하기 위한 조립판

컴포넌트 : 그 위의 레고 블럭

 

레고에 비유하자면 이렇게 비유할 수 있겠다.

 

즉, 화면을 구성할 수 있는 블록이며 단일 컴포넌트로 존재하는 것 뿐 아니라

화면 전체를 3개의 컴포넌트로 분할한 후, 분할된 1개의 컴포넌트에서 여러개의 또 다른 컴포넌트를 가질 수 도 있다.

이 과정에서 앞서 말했듯이 재활용 또한 가능하다. 또한 컴포넌트는 인스턴스이기도 하다.

 

Component 등록 방법

가장 기본적인 컴포넌트 등록 방법은 컴포넌트의 이름과 내용을 적는 것이다.

 

<div id="app">
	<my-component></my-component>
</div>

new Vue({
	e1: "#app",
    components:{
    // "컴포넌트 이름" : "컴포넌트 내용"
    "my-component":{
    	template: "<div>custom component!</div>"
    	}
    }
})

 

컴포넌트 이름은 html에 등록할 사용자 정의 태그를 의미하고

컴포넌트 내용은 그 태그가 실제 화면 요소로 변환될 때의 내용을 말한다.

 

이때 template, data, methods 등 속성도 정의할 수 있다.

 

컴포넌트는 전역 또는 지역으로 등록할 수도 있다.

 

//전역 컴포넌트

Vue.component('my-component', {
	//컴포넌트 내용
    template: '',
})

 

//지역 컴포넌트

var cmp = {
	//컴포넌트 내용
    template : ''
}

new Vue({
	components:{
    	'my-component' : cmp
    }
})

 

 

추가적으로, Vue 애플리케이션이 커지게 되면 이 방법을 주목하면 될 것 같다.

ex) ParentComponent.vue에 관리하던 data들이 너무 많아져서 이를 컴포넌트로 나누고 싶은 상황

 

 

msgComponent.vue : ParentComponent.vue의 하단 컴포넌트,  msg data를 바인딩하는 컴포넌트

linkComponent.vue : ParentComponent.vue의 하단 컴포넌트, link를 가지는 컴포넌트

 

 //parentComponent.vue

<template>
  <div>
    <MsgComponent />
    <LinkComponent />
  </div>
</template>

<script>
import MsgComponent from "@/components/msgComponent.vue";
import LinkComponent from "@/components/linkComponent.vue";

export default {
  name: "ParentComponent",
  components: { MsgComponent, LinkComponent },
};
</script>

 

부모 컴포넌트에 원하는 하위 컴포넌트 파일을 import 시키고 components 속성에 import한 해당 컴포넌트들의

이름을 추가해주면 된다. 이때 주의할 점은 하위 컴포넌트 파일을 import 할때 대문자로 해야한다는 점이다.

마지막으로 components 속성에 적은 컴포넌트들을 태그처럼 사용하면 된다.

 

 

//msgComponent.vue

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "msgComponent",
  data() {
    return {
      msg: "Hi I'm msgComponent~!",
    };
  },
};
</script>

 

//linkComponent.vue

<template>
  <div>
    <h1>Essential Links</h1>
    <ul>
      <li>
        <a href="https://vuejs.org" target="_blank"> Core Docs </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "linkComponent",
};
</script>

 

실행한 모습

 

테두리친 컴포넌트(msgComponent.vue, linkComponent.vue)가

상단 컴포넌트(ParentComponent.vue) 에서 보이는 것을 확인할 수 있다.

이런식으로 컴포넌트들을 등록할 수 있고, vue 애플리케이션 규모가 커질때 이를 활용할 수 있을 것이다.

 

다음은 컴포넌트 간의 데이터 전달 방법에 대해서 설명하는 시간을 갖겠다.