Vue.js는 강력하고 유연한 컴포넌트 기반 프레임워크로, Vue 3.0에서는 다양한 특수 엘리먼트들이 제공됩니다. 여기서는 <component>, <slot>, <template> 엘리먼트의 목적과 사용 방법에 대해 설명하겠습니다. 각각의 기능을 이해하고 적절히 활용하면 코드를 더 깔끔하고 모듈화된 구조로 만들 수 있습니다.
1. <component>
<component> 엘리먼트는 동적으로 컴포넌트를 렌더링할 수 있게 해줍니다. 'is' 속성에 렌더링할 컴포넌트의 이름을 지정하면 됩니다. 이 방법은 다양한 형태의 컴포넌트를 전환할 필요가 있을 때 유용합니다.
예제 코드:
```html
<template>
<div>
<component :is="currentComponent"></component>
<button @click="toggleComponent">Toggle Component</button>
</div>
</template>
<script>
export default {
data() {
return {
currentComponent: 'componentA'
}
},
methods: {
toggleComponent() {
this.currentComponent = this.currentComponent === 'componentA' ? 'componentB' : 'componentA';
}
},
components: {
componentA: {
template: '<div>Component A</div>'
},
componentB: {
template: '<div>Component B</div>'
}
}
}
</script>
```
2. <slot>
<slot> 엘리먼트는 자식 컴포넌트에서 부모 컴포넌트의 콘텐츠로 자리 표시자 역할을 합니다. 컴포넌트를 재사용하면서 다양한 콘텐츠를 삽입할 수 있습니다.
예제 코드:
```html
<template>
<div>
<message-component>
<template v-slot:default>
<p>This is a slot content!</p>
</template>
</message-component>
</div>
</template>
<script>
export default {
components: {
'message-component': {
template: `
<div>
<slot>Default message if no content is passed.</slot>
</div>
`
}
}
}
</script>
```
3. <template>
<template> 엘리먼트는 렌더링되지 않는 컨테이너로, 여러 엘리먼트의 그룹화가 필요할 때 사용됩니다. 주로 v-if, v-for 같은 디렉티브와 함께 사용됩니다.
예제 코드:
```html
<template>
<div>
<template v-if="showItems">
<p v-for="item in items" :key="item.id">{{ item.name }}</p>
</template>
</div>
</template>
<script>
export default {
data() {
return {
showItems: true,
items: [
{ id: 1, name: 'Item A' },
{ id: 2, name: 'Item B' }
]
}
}
}
</script>
```
이 세 가지 특수 엘리먼트를 활용하면 Vue 3.0의 컴포넌트를 더욱 유연하고 효과적으로 설계할 수 있습니다. 개발자는 이러한 도구를 사용하여 프로젝트 요구 사항에 맞는 맞춤형 솔루션을 생성할 수 있습니다.