[Vue/코딩애플/part1] 7. 컴포넌트(Component) / 컴포넌트 파일명 한 단어로 가능하게 하는 방법

📌컴포넌트 파일명 한 단어로 하기

컴포넌트 파일을 만들 때, 두 단어 이상으로 만들지 않으면 에러로 인식한다 (ex. Product.vue (X) / ProductList.vue (O))

한 단어로 파일명을 만들고 싶을 때 아래와 같이 하자

 

package.json 파일을 열어서 rules 라는 항목에 다음과 같이 추가하면 된다.

⚡추가 한 다음 npm run serve 가 돌아가고 있다면 종료하고 다시 실행해야 한다.

 

실습할 때 두 단어 이상으로 작명하는 것이 은근 귀찮다.

"rules": {
   "vue/multi-word-component-names": "off"
}

 

에러가 사라졌음을 확인할 수 있다.

 

 

---

📌 Vue 의 컴포넌트

원하는 HTML 덩어리를 한 글자로 축약할 수 있게 도와주는 문법이 컴포넌트이다.

 

컴포넌트를 만드는 방법은,

1) 컴포넌트명.vue 파일을 만든다 (컴포넌트화 하고 싶은 HTML 영역)

•  해당 vue 파일을 하나의 컴포넌트라고 한다.
•  예시에서는 Discount.vue 파일

2) 해당 컴포넌트를 활용할 파일에서 (예시는 App.vue) import 한다.

• import {작명} from {컴포넌트 vue 파일 경로}

3) components : { } 에 컴포넌트를 등록한다.

components : {
	{작명} : import 한 컴포넌트
}

 

 

4) 원하는 곳에서 컴포넌트를 쓴다. <Component명/>

 

글로는 이해가 힘드니 직접 만들어보자.

 

Discount.vue 라는 HTML 영역을 컴포넌트화해보자

먼저 컴포넌트화 하고 싶은 HTML 파일을 등록한다

 

(Discount.vue)

<template>
  <div class="discount">
    <h4>지금 결제하면 20% 할인</h4>
  </div>
</template>

<script>
export default {
  name: 'Discount',

}
</script>

<style>

</style>

 

name 은 디버깅할 때 유용하니 설정하는게 좋다고 한다. 설정하지 않아도 오류는 나지 않는다.

 

이제 App.vue 에서 Discount 라는 컴포넌트를 노출시켜보자.

 

import Discount from "./components/Discount.vue";

로 import 해준 뒤

 

script 영역에 

components: {
    Discount : Discount
  }

 

안에 컴포넌트를 등록하면 된다.

 

components : {
	{작명} : import 한 컴포넌트
}

 

Discount : Discount 는 

Discount 로 축약 가능하다

 

components : {
	Discount
}

 

<script>
import prodList from './assets/prodData.js'
import Discount from "./components/Discount.vue";

export default {
  name: 'App',
  // 데이터 저장 공간 (= state)
  data() {
    return {
      menu : ['Home', 'Shop', 'About'],
      count : [0,0,0,0,0,0], // 신고 수
      isModal : false,
      prodList, // 부동산 데이터들
      prodId : 0, // 상품 id
    }
  },
  methods: {
    increase(i) {
      // 함수 내용 입력
      this.count[i]++;
    }
  },
  components: {
    Discount : Discount
  }
}
</script>

 

원하는 HTML 영역에

<Discount/>

또는

<Discount><Discount/> 로 출력 가능하다.

 

 

 

 

컴포넌트를 쓰는 이유?
1. 코드가 보기 쉬워진다.
2. 재사용이 용이하다.

 

📌 모달창도 컴포넌트화 해보기

1. Modal.vue 파일 만들기

<template>
   <div class="black-bg" v-if="isModal === true">
    <div class="white-bg">
      <img :src="prodList[prodId].img" alt="">
      <h4>{{prodList[prodId].title}}</h4>
      <p>{{prodList[prodId].content}}</p>
      <p>{{prodList[prodId].price}} 원</p>
      <button @click="isModal=false">닫기</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Modal',
}
</script>

<style>

</style>

 

2. import 하고 / 등록하고

<script>
import prodList from './assets/prodData.js'
import Discount from "./components/Discount.vue";
import Modal from "./components/Modal.vue";

export default {
  name: 'App',
  // 데이터 저장 공간 (= state)
  data() {
    return {
      menu : ['Home', 'Shop', 'About'],
      count : [0,0,0,0,0,0], // 신고 수
      isModal : false,
      prodList, // 부동산 데이터들
      prodId : 0, // 상품 id
    }
  },
  methods: {
    increase(i) {
      // 함수 내용 입력
      this.count[i]++;
    }
  },
  components: {
    Discount : Discount,
    Modal : Modal,
  }
}
</script>

 

3. 쓰기

 <Modal/>

 

하지만 아직 props 를 배우지 않았기 때문에 제대로 동작하지 않는다.

props 를 배운 다음에 적용해보자