[개발자의품격][부트캠프][1기][19차시] Vue.js #6 | 재사용 컴퍼넌트에 부트스트랩 적용

부트스트랩 설치

1. 터미널에서 프로젝트 폴더로 이동후 2, 3번 설치
2. npm install bootstrap
3. npm install @popperjs/core
4. main.js 파일에 5, 6번 import
5. import 'bootstrap/dist/css/bootstrap.min.css'
6. import 'bootstrap/dist/js/bootstrap.js'

※ 외부 라이브러리는 main.js에 import 해야 사용할 수 있다.

 

부모 component

<!-- src/views/4_reuse/ListView.vue  -->
<template>
  <div>
    <button class="btn btn-danger" @click="doSearch">조회</button>
    <!-- simple-grid를 입력하면 import SimpleGrid from '@/components/fragments/SimpleGrid.vue'와 components에 SimpleGrid를 자동으로 만들어 준다. -->
    <simple-grid :headers="headers" :items="drinkList" />
  </div>
</template>
<script>
// @를 사용하면 vue파일 경로가 변경되더라도 에러가 발생하지 않는다.
import SimpleGrid from '@/components/fragments/SimpleGrid.vue'
export default {
  components: { SimpleGrid },
  data() {
    return {
      // SimpleGrid.vue에 thead 정보를 전달
      headers: [
        { title: '제품번호', key: 'drinkId' },
        { title: '제품명', key: 'drinkName' },
        { title: '가격', key: 'price' }
      ],
      drinkList: []
    }
  },
  methods: {
    doSearch() {
      // SimpleGrid.vue에 tbody 정보를 전달
      this.drinkList = [
        {
          drinkId: '1',
          drinkName: '코카콜라',
          price: 700,
          qty: 1
        },
        {
          drinkId: '2',
          drinkName: '오렌지주스',
          price: 1200,
          qty: 1
        },
        {
          drinkId: '3',
          drinkName: '커피',
          price: 500,
          qty: 1
        },
        {
          drinkId: '4',
          drinkName: '물',
          price: 700,
          qty: 1
        },
        {
          drinkId: '5',
          drinkName: '보리차',
          price: 1200,
          qty: 1
        },
        {
          drinkId: '6',
          drinkName: '포카리',
          price: 1000,
          qty: 1
        },
        {
          drinkId: '7',
          drinkName: '뽀로로',
          price: 1300,
          qty: 1
        }
      ]
    }
  }
}
</script>

 

자식 component

<!-- src/components/fragments/SimpleGrid.vue  -->
<template>
  <table class="table table-bordered">
    <!-- 부모 component로 부터 headers 배열 데이터 받아와 thead 그리기 -->
    <thead>
      <tr>
        <th :key="th.key" v-for="th in headers">{{ th.title }}</th>
      </tr>
    </thead>
    <!-- 부모 component로 부터 items 배열 데이터 받아와 tbody 그리기 -->
    <tbody>
      <tr :key="i" v-for="(item, i) in items">
        <td :key="th.key" v-for="th in headers">{{ item[th.key] }}</td>
      </tr>
    </tbody>
  </table>
</template>
<script>
export default {
  components: {},
  // props에서 부모 component로 부터 데이터를 받는다.
  props: {
    headers: {
      type: Array,
      default: function () {
        return []
      }
    },
    items: {
      type: Array,
      default: function () {
        return []
      }
    }
  }
}
</script>

 

[그림 1] 재사용 컴퍼넌트에 부트스트랩 적용

 

프로젝트를 거듭 진행하면서 component가 자산으로 축적된다. component를 많이 가지고 있으면 신규 프로젝트 시 개발 생산성을 극대화할 수 있다.