[Vue.js] 컴포넌트(Component)

Vue.js 컴포넌트(Component)?

웹앱을 제작할때 재사용 가능한 부분을 독립적으로 구축할 수 있게 해주는 핵심 개념이다.

컴포넌트를 사용하면 작은 부분을 독립적으로 구축하고, 이를 조합하여 큰 웹애플리케이션을 구축 할 수 있다.

 

컴포넌트 만들고 사용하기

간단하게 3단계로 요약하자면,

1. 컴포넌트 vue 파일 생성

2. 생성된 컴포넌트 vue 파일을 사용 할 vue파일에서 import

3. 생성된 컴포넌트를 사용 할 vue 파일에서 등록해주고 사용

 

예시를 통해 확인해보자. 'MyBanner'이라는 컴포넌트를 만들어서 App.vue 에서 사용을 하려고 한다.

 

1. 컴포넌트 vue 파일생성 (MyBanner.vue)

// 생성한 컴포넌트 - MyBanner.vue 

<template>
    <div class="banner">
    	나의 배너
    </div>
</template>

<script>
export default {
  data() {
    return {
    };
  }
};
</script>

 

2. 생성된 컴포넌트 vue 파일을 사용 할 vue파일(App.vue)에서 import

 

// 컴포넌트를 사용할 vue파일 - App.vue

<template>
    
</template>

<script>

import MyBanner from "./MyBanner.vue 경로~~"
export default {
  data() {
    return {
    };
  }
};
</script>​

 

3. 생성된 컴포넌트를 사용 할 vue 파일(App.vue)에서 등록해주고 사용

// 컴포넌트를 사용할 vue파일 - App.vue

<template>
    <MyBanner></MyBanner>
</template>

<script>

import MyBanner from "./MyBanner.vue 경로~~"
export default {
  data() {
    return {
    };
  },
  components: {
  	MyBanner,
  }
};
</script>​

 

예시를 기준으로 순서를 요약하자면,

 

1. 컴포넌트를 사용할 MyBanner.vue파일을 생성

2. App.vue에서 사용하기위해 import MyBanner from "MyBanner.vue파일 경로~" 로 가져오기

3. App.vue에서 MyBanner.vue 컴포넌트를 사용하기위해 components 항목을 생성하여 등록 후 <MyBanner /> 태그를 사용.

 

컴포넌트는 등록을 했다면, 반드시 사용을 해야한다. 그렇지 않으면 오류를 출력 시킨다.

 

 

복잡한거 같은데 컴포넌트를 사용하는 이유?

1. 재사용성: 위에서 얘기한대로 독립적인 부분을 작게 구축해 놓은 형태이기 때문에 필요한 곳 어디서나 재사용이 가능하다. 코드 중복을 줄일 수 있다는 것만으로도 매우 큰 메리트다.

 

2. 모듈성: 웹앱을 작은 모듈로 나눌 수 있기 때문에 코드를 조직하기가 쉬워진다. 각 컴포넌트는 자체 로직,템플릿,스타일을 가지기 때문에 수정을 원한다면 전체적으로 뜯어보거나 고칠 필요 없이 해당 컴포넌트를 찾아 수정하면 된다.

 

3. 유지보수성: 컴포넌트 기반 아키텍처를 사용하면 애플리케이션을 이해하고 유지보수 난이도가 훨씬 낮아진다. 위의 내용과 일맥상통한다.

 

4. 테스트용이성: 단위 테스트가 매우 용이해진다. 각 컴포넌트를 개별적으로 테스트 할 수 있으며, 버그를 식별하고 수정하는 것이 매우 쉬워진다.

 

이 정도로 요약 할 수 있다