[Vue] Component

 

Component가 무엇일까?

: 긴 HTML을 한 단어롤 줄일 수 있는 문법

이라고 간단히 생각하면 된다.

 

먼저 새 vue 파일 하나를 만든다.

--> Discount.vue 라는 이름으로 컴포넌트를 하나 만들었다.

모든 vue 파일은 같은 구조를 갖는다.

<template>

</template>

<script>

export default {

 

}

</script>

<style>

</style>

--> template, script, style로 된 구조

 

template 안에 필요한 html을 작성해주고,

<template>

  <div class="discount">

    <h4>지금 결제하면 20% 할인</h4>

  </div>

</template>

<script>

export default {

 name: 'Dis_count',

}

</script>

<style>

</style>

--> 참고 : name에 Discount라고 작명했더니 두 단어 이상으로 하라고 강요해서 Dis_count로 바꿨더니 에러 해결!

 

다시 App.vue로 들어가서 Step 3를 진행한다.

스탭 1, import 해주기

import Discount from './Discount.vue';

--> Discount.vue라는 파일을 사용할거야. 라는 의미로 왼쪽 Discount는 내가 작명한 이름이다.

스탭 2, components 안에 import해온 Discount를 등록하기

export default {

  name: 'App',

  data() {

    return {

      누름 : 0,

      원룸들 : data,

      modalOpen : false,

      신고수 : [0,0,0],

      메뉴들 : ['Home', 'Shop', 'About'],

      products : ['역삼동원룸', '천호동원룸', '마포구원룸']

    }

  },

  methods : {

    increase() {

      this.신고수[0]++;

    },

    increase1() {

      this.신고수[1]++;

    },

    increase2() {

      this.신고수[2]++;

    }

  },

  components: {

    Discount : Discount,

  }

}

--> 여기서도 왼쪽 Discount는 내가 작명한 이름이다.

스탭 3, <Discount/>를 원하는 자리에 사용하기

<template>

  <div class="menu">

    <a v-for="aaa in 메뉴들" :key="aaa">{{ aaa }}</a>

  </div>

  <Discount/>

  <div class="black-bg" v-if="modalOpen == true">

    <div class="white-bg">

        <h4>{{ 원룸들[누름].title }}</h4>

        <p>>{{ 원룸들[누름].content }}</p>

        <p>>{{ 원룸들[누름].price }}원</p>

        <button @click="modalOpen = false">닫기</button>

    </div>

  </div>

  <div v-for="(product,i) in 원룸들" :key="i">

    <img :src="product.image" class="room-img">

    <h4 @click="modalOpen = true; 누름 = i">{{ product.title }}</h4>

    <p>{{ product.price }}원</p>

  </div>

</template>

--> 이렇게 하면 끝! 컴포넌트와 관련된 style은 Discount.vue에다 입력해도 되고, App.vue에다 입력해도 된다.

스타일도 적용해서

.discount {

  background: #eee;

  padding: 10px;

  margin: 10px;

  border-radius: 5px;

}

 

결과물을 보면?

--> 이렇게 컴포넌트를 사용해서 UI를 추가할 수 있다.

 

* 그렇다면 컴포넌트 문법을 굳이 왜 쓰는 것일까?

1. 보기 복잡해서

2. 재사용(반복사용)이 용이해서

 

* 초보들이 잘 하는 실수가 있다?!

--> 바로 '모든 코드를 컴포넌트화 시키는 것'이다. 반복 사용하지 않는다면 컴포넌트화 시키지 않는 것이 좋다.
     데이터 관리가 어려워지기 때문이다.

 

출처 : 코딩애플