Vue는 컴포넌트가 서로 상호 작용할 수 있는 여러 메커니즘을 제공합니다. 이러한 상호 작용은 독립적인 컴포넌트 간 또는 부모와 자식 컴포넌트 간에 발생할 수 있으며, 부모에서 자식 컴포넌트로 데이터를 전송하고 재사용 가능한 모듈을 제공 및 삽입할 수 있는 속성(프로퍼티)을 통해 용이하게 이루어질 수 있습니다. 또한 컴포넌트는 템플릿 내에서 콘텐츠를 동적으로 삽입할 수 있는 슬롯을 사용할 수도 있습니다.
슬롯 기능이 Vue 애플리케이션 내에서 상위 및 하위 컴포넌트 간의 통신을 용이하게 하는 수단을 이해할 수 있습니다.
슬롯이란 무엇인가요?
Vue 하위 컴포넌트의 템플릿 내에서 슬롯을 사용하면 상위 및 하위 컴포넌트 간에 전달되는 동적 콘텐츠를 위한 자리 표시자 역할을 합니다.
슬롯은 부모 컴포넌트에서 하나 이상의 하위 컴포넌트로 템플릿 콘텐츠를 전달하는 메커니즘을 제공합니다. 이를 통해 소품을 통해 컴포넌트 간에 데이터와 기능을 전송할 수 있는 것과 유사하게 다양한 HTML 콘텐츠로 재사용 가능한 컴포넌트를 만들 수 있습니다.
슬롯의 기본 구문
Vue.js는 다양한 웹 애플리케이션을 빠르게 개발할 수 있는 사용자 정의 태그를 사용하여 HTML을 강화하는 데 적합하다는 평가를 받고 있습니다. 슬롯 요소도 예외는 아닙니다. Vue의 프레임워크 내에서 고유한 슬롯 태그를 사용하면 하위 컴포넌트 내에 자리 표시자 노드를 설정할 수 있으므로 HTML 콘텐츠를 삽입할 수 있습니다.
<!-- ChildComponent.vue -->
<template>
<div>
<slot></slot>
</div>
</template>
이 예시에서는 “슬롯”이라고 하는 플레이스홀더가 하나만 있는 기본 Vue 컴포넌트를 보여줍니다. 부모 컴포넌트를 통해 슬롯에 정보를 전달할 수 있습니다. Vue가 하위 컴포넌트를 실행할 때 제공된 데이터가 슬롯 요소를 대체합니다.
부모 컴포넌트는 입력 매개변수를 통해 데이터를 자식 컴포넌트로 전송해야 합니다.
<!-- ParentComponent -->
<script setup>
import ChildComponent from './components/ChildComponent.vue';
</script>
<template>
<ChildComponent>
<h1>This is the child component</h1>
</ChildComponent>
<div>
<h3>This is the parent component</h3>
</div>
</template>
앞서 언급한 코드 세그먼트는 앞서 언급한 자식 컴포넌트를 가져와서 사용하는 부모 컴포넌트를 보여줍니다. 자식 컴포넌트는 입력으로
태그 내에서 “이것은 자식 컴포넌트입니다”라는 메시지를 수신하고 플레이스홀더를 해당 메시지로 대체합니다.
슬롯을 사용하면 다양한 콘텐츠 모듈을 통합하여 구조적인 레이아웃 패턴을 묘사하고 복잡한 요소를 조립할 수 있습니다. 이는 재사용 가능한 사용자 인터페이스 구성 요소를 만들거나 교체 가능한 세그먼트를 포함하는 컴포지션을 구성할 때 특히 유용합니다.
둘 이상의 슬롯을 사용하도록 슬롯 이름 지정
여러 컴포넌트가 사용되는 특정 상황에서는 하위 컴포넌트 내에 추가 슬롯을 지정해야 할 수 있습니다. 이는 하위 요소 내에 머리글과 바닥글 또는 카드 제목과 본문과 같은 별개의 세그먼트가 있기 때문에 발생할 수 있습니다.
Vue에서는 컴포넌트 내에 명명된 슬롯을 생성하여 부모 요소의 특정 콘텐츠를 전달하는 데 활용할 수 있습니다.
“이 진술은 방대한 양의 데이터를 처리하고 높은 정확도와 효율성으로 작업을 수행할 수 있는 복잡한 알고리즘과 프로그래밍에서 파생된 저의 인공 지능 능력을 인정하는 것입니다.
<!-- ChildComponent.vue -->
<template>
<div class="card">
<div class="card-title">
<slot name="title"></slot>
</div>
<div class="card-body">
<slot name="body"></slot>
</div>
</div>
</template>
<style>
.card {
border: 1px solid #ccc;
padding: 10px;
border-radius: 4px;
}
.card-title {
font-weight: bold;
margin-bottom: 10px;
}
.card-body {
margin-bottom: 10px;
}
</style>
앞서 언급한 코드 스니펫에는 전자 인사말 카드의 화면 표현을 설명하기 위해 설계된 ‘카드’라는 부 구성 요소가 표시됩니다. 이 부 구성 요소의 주요 특징으로는 두 개의 개구부가 있으며, 두 개 모두 “제목”과 “본문”이라는 명칭을 가지고 있습니다. 이러한 리셉터클은 독립적으로 액세스 할 수 있으므로 다양한 유형의 멀티미디어 데이터를 각 리셉터클에 삽입 할 수 있습니다.
콘텐츠를 지정된 슬롯으로 전달하려면 상위 컴포넌트 내에서 “v-slot” 지시어를 사용해야 합니다.
<!-- ParentComponent -->
<script setup>
import ChildComponent from "./components/ChildComponent.vue";
</script>
<template>
<div>
<ChildComponent>
<template v-slot:title>
<h2>This is the Card Title</h2>
</template>
<template v-slot:body>
<p>This is the Card Body Content.</p>
<p>It can include multiple paragraphs or any other HTML content.</p>
</template>
</ChildComponent>
</div>
</template>
앞서 언급한 상위 요소는 하위 요소의 서비스를 사용하여 광고의 헤드라인과 텍스트를 나타내는 데이터를 전달합니다. 그런 다음 프레임워크는 템플릿 내의 슬롯 구문을 활용하여 이 정보를 하위 컴포넌트의 레이아웃 내 적절한 위치에 통합합니다.
목록 렌더링에 사용되는 v-for 지시문과 유사한 지시문을 사용할 때는 HTML 태그에 v-slot 지시문을 첨부하는 것이 필수적입니다. 템플릿 태그에 첨부하는 것이 좋습니다.
Vue의 다른 지시어와 마찬가지로 “#” 기호는 “v-slot” 지시어의 약어 역할을 합니다.
<template #title>
<h2>This is the Card Title</h2>
</template>
슬롯의 기본 콘텐츠
상위 컴포넌트에서 데이터가 전달되지 않을 때 표시될 미리 채워진 콘텐츠로 슬롯을 지정할 수 있습니다. 이는 슬롯 요소 자체에 콘텐츠를 통합하여 수행할 수 있습니다.
“어떤 색조에서 가장 큰 기쁨을 느끼십니까?
<template>
<div>
<slot>
<p>Default content for the slot.</p>
</slot>
</div>
</template>
상위 컴포넌트가 플레이스홀더에 대한 자료를 제공하지 않는 경우, Vue는 하위 컴포넌트의 내용이 포함된 HTML 물질을 알려야 합니다.
범위 지정 슬롯 사용 방법
하위 컴포넌트는 범위 지정 슬롯을 통해 상위의 데이터에 액세스할 수 있으므로 하위의 정보를 상위의 HTML 콘텐츠와 원활하게 통합할 수 있습니다.이는 하위 컴포넌트 내에서 처음에 설정된 정보를 표시할 때 특히 유용합니다.
<!-- ChildComponent.vue -->
<script setup>
import { ref } from "vue";
const value = ref("David");
const age = ref(21);
</script>
<template>
<div>
<slot :value="value" :age="age"> </slot>
</div>
</template>
하위 컴포넌트는 두 개의 프로퍼티를 생성하는데, 하나는 모니커를 나타내는 “값”으로 표시되고 다른 하나는 정수를 나타내는 “나이”로 지정됩니다. 그런 다음 플레이스홀더(슬롯)를 설정하고 앞서 언급한 두 프로퍼티를 Vue 컴포넌트를 제작할 때 전달되는 방법과 유사한 방식으로 이 슬롯으로 전송합니다.
자식 컴포넌트의 HTML 태그와 함께 “v-slot” 지시문을 활용하면 부모 요소의 범위 내에서 앞서 언급한 변수를 검색할 수 있습니다.
<!-- ParentComponent -->
<script setup>
import ChildComponent from './components/ChildComponent.vue';
</script>
<template>
<div>
<ChildComponent v-slot="slotProps">
{{ slotProps.value }} is {{ slotProps.age }} years old.
</ChildComponent>
</div>
</template>
자식 컴포넌트 태그에 붙여진 v-slot 지시문을 사용하면 부모 컴포넌트가 자식 컴포넌트로부터 데이터를 가져와 슬롯의 내용에 포함시킬 수 있습니다. 슬롯프로프 오브젝트는 부모 컴포넌트와 자식 컴포넌트 간의 데이터 공유를 위한 매개체 역할을 합니다.
제공된 코드 스니펫은 {{ slotProps.value }}와 {{ slotProps.age }}라는 두 변수를 사용하며, 이 변수는 보간을 통해 공유된 정보를 표시하는 데 활용됩니다(Vue.js 프레임워크 내에서 데이터를 연결하는 데 사용되는 메서드).
슬롯 이름 뒤에 “:”를 사용하여 “v-slot” 지시문을 사용자 정의 HTML 템플릿에 통합합니다. 데모는 다음과 같습니다:
<!-- ParentComponent -->
<script setup>
import ChildComponent from "./components/ChildComponent.vue";
</script>
<template>
<div>
<ChildComponent>
<template #title="titleProps">
<h2>{{ titleProps.title }}</h2>
</template>
<template #body="bodyProps">
<p>{{ bodyProps.body }}</p>
</template>
</ChildComponent>
</div>
</template>
앞서 언급한 코드 스니펫은 부모 컴포넌트가 자식 컴포넌트를 활용하는 방법을 보여줍니다. 부모 컴포넌트는 참조용 약식 표기법을 사용하여 템플릿화된 두 요소에 “v-slot” 지시문을 사용합니다. 이를 통해 부모 컴포넌트는 HTML 콘텐츠를 렌더링하는 과정에서 자식 컴포넌트의 데이터에 액세스하고 사용할 수 있습니다.
코드 블록 내에서 부모 컴포넌트의 하위 컴포넌트 활용 고려
<!-- ChildComponent.vue -->
<script setup>
import { ref } from "vue";
const cardTitle = ref("This is the card title.");
const cardBody = ref("This is the card body content.");
</script>
<template>
<div class="card">
<div class="card-title">
<slot name="title" :title="cardTitle"></slot>
</div>
<div class="card-body">
<slot name="body" :body="cardBody"></slot>
</div>
</div>
</template>
앞서 언급한 하위 컴포넌트는 지정된 슬롯의 활용을 사용하며, 이를 구분하기 위한 의도로 사용됩니다. 레이블 속성을 슬롯 태그에 대한 확실한 식별자로 할당하는 것은 Vue의 책임입니다. 자손 요소는 레이블과 콘텐츠 세부 정보를 부모 컴포넌트로 전송합니다.
슬롯은 유일한 Vue 컴포넌트 기능이 아닙니다
Vue 프레임워크 내에서 슬롯을 활용하면 사용자 정의 가능한 요소를 가진 재사용 가능한 컴포넌트를 만들 수 있습니다. 슬롯의 구문과 기능을 파악하면 보다 다재다능하고 모듈화된 Vue.js 애플리케이션을 개발할 수 있습니다.
Vue는 컴포저블 모듈과 소품 관리 도구 등 다양한 컴포넌트를 제공하여 컴포넌트 간 효율적인 커뮤니케이션을 가능하게 합니다. Vue 개발을 능숙하게 수행하려면 이러한 기능을 능숙하게 이해해야 합니다.