[Vue] Components 컴포넌트

 

1. 컴포넌트란?

 

컴포넌트는 HTML 코드를 한 글자로 축약할  수 있도록 도와주는 문법이다.

특히 재사용이 가능한 코드를 캡슐화하는데 도움이 된다.

 

 

 

 

2. 컴포넌트 만드는 법

 

1) 컴포넌트를 사용하는 상황

 

일반 HTML로 간단하게 배너를 하나 제작해 보았다.

 

<div class="discount">
  <h4>할인중입니다~~</h4>
  <p>~~!~!@!</p>
  <p>~~!~!@!</p>
  <p>~~!~!@!</p>
  <p>~~!~!@!</p>
</div>

 

위 코드가   지금은 짧지만    엄청나게 길고 자주 사용해야 하는 코드라고 가정해 보자.

 

매번 위 코드를 다 작성하면 너무 귀찮을뿐더러, 코드가 지저분해지고 복잡해질 것이다. 으으

 

이럴 때 위 코드를 짧게 축약해 주는 컴포넌트 문법을 사용하면 된다.

 

 

 

2)  vue 파일 생성

 

컴포넌트로 생성할 파일을 하나 만든  뒤, 기본 vue 탬플릿을 적용시킨다.

 

<template>
  축약할 HTML
</template>

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

<style>
  넣을 스타일 
</style>

 

이게 기본 vue 파일의 구조이다.

 

이 vue 파일 하나가 곧 하나의 컴포넌트가 되는 것이다.

 

 

 

 

할인 정보를 나타내는 Discount.vue를 생성하고, App.vue에 적혀있던 스타일 정보들도 가져왔다.

 

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

<script>
</script>

<style>
  .discount {
      background: #eee;
      padding: 10px;
      margin: 10px;
      border-radius: 5px;
  }
</style>

 

 

 

 

3) export 하기

 

앞에서 봤던 것처럼 해당 컴포넌트를 다른 파일에서 사용하기 위해서는 export 및 import 과정을 거쳐야 한다.

 

 

위 코드에서 script 태그 내부에 이 파일의 내보낼 이름을 정해준다.

 

 

Discount로 지정해 주었다.

 

 

 

 

4) import 하기

 

export와 짝꿍인 import를 해줄 차례이다.

 

App.vue 파일로 이동한 뒤, 헷갈리지 않게 그냥 동일한 Discount 이름으로 import 해왔다.

 

 

 

 

 

5) components에 등록

 

 

 

script / component 태그 안에 이렇게 동일한 이름으로 import 해온 데이터를 사용하기 위해 등록해 주었다.

( 만약 components라는 항목이 없으면 생성하면 된다. )

 

 

 

 

 

6) 사용하기 

이렇게 사용하면 된다.

 

이런 식으로 template 안에서 Discount라는 단어 하나로 사용할 수 있는 편리한 컴포넌트가 완성되었다.

 

 

 

 

 

 

 

 

 

 

★   주의할 점   ★ 

 

컴포넌트를 생성하는 것은 좋지만,

데이터 바인딩을 할 때 귀찮은 경우가 생기기도 한다.

 

 

 

무분별한 컴포넌트 생성은 

 

• 전반적인 코드의 가독성과 유지관리 효율성 저하
• 컴포넌트 구조의 복잡성 증가
• 독립적인 컴포넌트로의 변의

 

외에도 다양한 문제 발생을 초래한다.

 

 

 

 

따라서 무작정 모든 코드들을 다 컴포넌트로 만들어버리는 것이 좋은 것이 아님을 알고 있어야 한다..

 

재사용이 많이 되거나 기능이 너무 다르거나 너무 코드가 복잡하거나.. 

이런저런 상황을 잘 판단하여 컴포넌트화 하는 것이 중요하다.