[개발자의품격][부트캠프][1기][19차시] Vue.js #5 | 재사용 콤퍼넌트

views 폴더는 화면 전체를 담당하는 component를 모아둔다. components 폴더는 화면의 일부분을 담당하는 component를 모아둔다. 하나의 component에서 다른 component를 불러와 사용할 수 있는 구조가 되는 것이다.

 

components 폴더의 component가 views 폴더의 component와 다른 점

1. router에 등록하지 않는다.
2. 파일명에 "View"를 붙이지 않는다.

 

실무에서 재사용 컴포넌트는 표준화된 스타일이나 버튼 등을 사용하거나, 또는 변경을 일괄 적용하기 위해 사용한다. 일반적으로 재사용 컴포넌트는 리드 개발자가 작성한다.

 

부모 component

<!-- src/views/4_reuse/PageView.vue -->
<template>
  <div>
    <page-title title="고객조회" :title2="title2" :list="list" />
  </div>
</template>
<script>
import PageTitle from '@/components/fragments/PageTitle.vue'

export default {
  components: { 'page-title': PageTitle }, // key 명을 value 명과 다르게 할 경우
  // components: { 'PageTitle': PageTitle },
  // 위 코드는 오브젝트이기 때문에 아래 코드와 동일하다.
  // components: { PageTitle },
  data() {
    return {
      title2: '고객리스트를 조회하는 화면',
      list: [1, 2, 3, 4]
    }
  }
}
</script>

 

자식 component

<!-- src/components/fragments/PageTitle.vue -->
<!-- 실무에서 fragments 폴더를 생성하여 사용한다. -->
<template>
  <div>
    <!-- 자식 component에서 직접 값을 입력할 수 있다.
    <!-- <h3>페이지 제목</h3> -->
    
    <!-- 부모 component로 부터 전달 받은 title, title2 문자열을 화면에 그린다. -->
    <h3>
      {{ title }} <small>({{ title2 }})</small>
    </h3>
    <!-- 부모 component로 부터 전달 받은 list 배열을 화면에 그린다. -->
    <div>{{ list }}</div>
  </div>
</template>
<script>
export default {
  components: {},
  // props는 properties의 약자
  props: {
    // 부모 component로 부터 title 문자열을 전달 받는다.
    title: {
      type: String,
      // 부모 component로 부터 전달 받은 값이 없을 때의 기본값
      default: '페이지 제목'
    },
    // 부모 component로 부터 title2 문자열을 전달 받는다.
    title2: {
      type: String,
      default: ''
    },
    num1: {
      type: Number,
      default: 0
    },
    isBoolean: {
      type: Boolean,
      default: false
    },
    // 부모 component로 부터 list 배열을 전달 받는다.
    list: {
      type: Array,
      // 배열과 오브젝트는 기본값 지정시 function 함수로 return해야 한다.
      default: function () {
        return []
      }
    }
  }
}
</script>

 

[그림 1] 부모 component 페이지의 일부분에 자식 component를 그린다.