[Vue.js] 뷰 컴포넌트 사용법 Vue Component

[VueJs] 뷰 컴포넌트 사용 방법 Vue Component

⭐️  컴포넌트 (Component) 란?

캡슐화된 코드 블록으로 한번 생성해 놓을시

쉽게 재사용이 가능하다.

(인스타그램이나 페이스북 같이 비슷한 UI가 

데이터만 다르게 반복되어 출력되는데

해당 프레임을 컴포넌트로 이해하면 쉽다)

 

⭐️  컴포넌트를 왜 쓰는가?

첫번째로 코드가 복잡해지면 가독성이 기하 급수적으로 떨어지기에

이럴때 컴포넌트는 복잡한 코드를 보기쉽게 하는 장점이 있다

(복잡한 파일을 카테고리 폴더별로 정리 하는 것과 비슷)

 

두번째로 유지보수가 쉬워진다.

같은 코드를 여러번 반복하지 않고 여러번 사용하기에

하나의 컴포넌트만 수정하면 컴포넌트 사용한 모든 코드에

수정 사안이 반영이 된다.

 

⭐️  샘플 예제 (로직)

쇼핑몰 상품 리스트가 나오는

간단한 웹앱을 만들어 보았는데

 

App이라는 부모 컴포넌트에서 

Menu라는 자식 컴포넌트를

이용하였고 서버의 데이터가 업데이트되면 자동으로

컴포넌트 또한 업데이트가 되는 방식이다

 

⭐️  App 컴포넌트 (부모 컴포넌트)

<!--UI-->
<template>
  <Menu :menu="menu"/>
</template>

<!--Script-->
<script>
import Menu from './components/Menu.vue';
export default {
  name : 'App',
  data (){
    return {
      menu : ['HOME','ABOUT' ,'PRODUCTS', 'ETC']
    }
  },
  components : {
    //ES6 부터 key, value의 변수명이 같을때 생략이 가능하다
    //Menu : Menu
    Menu
  }
}
</script>

 

⭐️  Menu 컴포넌트 (자식 컴포넌트-메뉴)

<template>
  <nav>
    <ul class="menu">
      <li class="menu--item" v-for="item,i in menu" :key="i">
        <a :href="'/'+item">{{item}}</a>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  name : 'Menu',
  props : {
    menu : Array
  } 
}
</script>

<style>
  .menu {
    display : flex;
    justify-content: center;
    padding : 10px;
    border-radius: 5px;
    background: steelblue;
    list-style: none;
  }

  .menu--item {
    padding : 10px;
  }

  .menu--item a {
    color : white;
    text-decoration: none;
  }
</style>

 

⭐️ 출력 결과