vue 컴포넌트 사용 시 알아두면 좋은 6가지

1. 케밥(ke-bob)과 카멜(camelCase) 표현

import한 컴포넌트를 template 영역에 태그로 작성할 때, 꼭 케밥(ke-bob)으로 작성해야 한다.

HTML은 대소문자를 구분하지 않기 때문에 todoList와 todolist를 동일하게 처리하기 때문에 규칙을 가지고 작성하는 것이 좋다.

 

script 영역에서 컴포넌트의 이름은 카멜(camelCase)로 작성했더라도 Vue.js가 자동으로 같은 컴포넌트인 것을 인식하기 때문에 동작에는 문제없다.

 

 

2. 컴포넌트에서 Style(css)을 모듈화하여 사용하기

컴포넌트에서 화면을 꾸며주는 css를 모듈 형태로 지정해서 사용할 수 있다.

 

컴포넌트의 style 영역 안에 작성된 css는 정적형태로만 사용될 수밖에 없다.

하지만 Vue.js에서는 style을 모듈화 하면 동적 형태로도 css를 사용할 수 있게 된다. 이렇게 모듈화된 style은 $style이라는 계산형 속성을 통해 사용이 가능하다.

<template>
 <div>
  <button v-on:class="$style.hand">BUTTON</button>
 </div>
</template>

<script>
</script>

<style module>
  .hand {cursor: pointer; background-color: #f5f5f5; color: #333333;}
</style>

 

 

3. 해당 컴포넌트에서만 style(css) 적용

해당 컴포넌트에만 특정 css를 적용하고자 할 경우, class로 구분하여 적용도 가능하지만 컴포넌트의 style을 scoped 하여 적용이 가능하다.

<style scoped>
 .hand {color: #333333;}
</style>

 

 

4. Slot(슬롯)

슬롯은 부모 컴포넌트에서 자식 컴포넌트로 HTML 마크업을 전달할 수 있게 해주는 기능

 

// 자식 컴포넌트 : Child.vue

<template>
  <div>
   <p>Hello</p>
   <slot></slot>
  </div>
</template>

 

// 부모 컴포넌트: Parents.vue

<template>
 <div>
  <child>
   // 자식컴포넌트의 slot 영역에 아래의 내용이 포함되어 출력
   <div>{{ AA }}</div>
  </child>
  <child>
   // 자식 컴포넌트의 slot 영역에 아래의 내용이 포함되어 출력
   <div>{{ BB }}</div>
  </child>
 </div>
</template>

<script>
import child from './Child.vue';

export default {
 component: {
  child
 },
 data() {
  return {
   AA: '안녕하세요.',
   VV: '반갑습니다.'
  }
 }
}
</script>

여러개의 슬롯을 사용할 경우, 슬롯에 이름을 붙여 사용한다.

// 자식컴포넌트
<slot name="header"></slot>
<slot name="body"></slot>
<slot name="footer"></slot>

// 부모 컴포넌트
<div slot="header">헤더</div>
<div slot="body">본문</div>
<div slot="footer">푸터</div>

 

5. 동적 컴포넌트

동적 컴포넌트는 동일한 위치에 상황에 따라 다른 컴포넌트를 동적으로 변경하여 보여주기 위한 기능이다.

보통 컴포넌트 태그에 v-bind:is 조건으로 컴포넌트 명을 변경해서 적용한다.

<component v-bind:is="compName"></component>

컴포넌트가 나오기 원하는 위치에 위와 같이 작성하고 compName 변수명에 컴포넌트 name을 매칭 시켜서 변경시키면 된다.

적용되어지는 컴포넌트에는 반드시 name: 'Header' 이런식으로 컴포넌트 이름을 지정해야 한다.

 

예시)

<keep-alive></keep-alive>

동적 컴포넌트를 사용할 경우 자주 사용되는 것이 keep-alive 태그이다. keep-alive는 컴포넌트가 정적인 화면일 경우 매번 랜더링을 하지 않도록 화면을 캐싱해 주는 태그이다.

<keep-alive include="home, intro, about"> 
   <component v-bind:is="compName"></component> 
</keep-alive>

위와 같이 include="home, intro, about" 처럼 include에 적시하면 해당 컴포넌트는 캐싱이 되어 화면이 바뀔때마다 랜더링을 다시하지 않고 캐싱되어 있는 내용을 다시 보여준다.
exclude="item"이렇게 exclude에 적시된 컴포넌트는 해당 화면이 호출될때마다 새로 랜더링을 다시 한다. 제품 상세 정보나 회원정보를 보여주는 컴포넌트 인 경우에 적합하다.

 

 

6. 재귀 컴포넌트

재귀 컴포넌트는 본인 컴포넌트의 template에서 자기 자신의 컴포넌트를 불러와 사용하는 컴포넌트를 말한다. 이때, 꼭 name 옵션을 지정해야 한다.

보통 Tree 구조를 표현할 때 많이 사용된다.