Vue3 <slot> element

🎯 <slot> 개념

---

1️⃣ 기본 개념

Vue.js 공식 사이트 slot
◼️ slot은 부모 컴포넌트에서 자식 컴포넌트로 HTML 콘텐츠를 전달할 때 사용하는 기능이다.
◼️ slot을 사용하면 컴포넌트의 재사용성을 높이고, 유연한 구조를 만들 수 있다.

---

2️⃣ 기본 사용법

◼️ 자식 컴포넌트에서 <slot>을 사용하면, 부모 컴포넌트에서 전달한 내용을 원하는 위치에 렌더링할 수 있다.

자식 컴포넌트 (Child.vue)

<template>
  <div class="box">
    <slot></slot>
  </div>
</template>

<style scoped>
.box {
  padding: 10px;
  border: 1px solid black;
}
</style>

부모 컴포넌트 (Parent.vue)

<template>
  <Child>
    <p>이 내용이 slot으로 전달됩니다!</p>
  </Child>
</template>

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

🚀 결과: <slot>이 있는 부분에 <p>이 내용이 slot으로 전달됩니다!</p>가 렌더링된다.

---

3️⃣ ⭐이름 있는 슬롯 (Named Slots)

◼️ 여러 개의 슬롯을 정의할 수 있으며, name을 지정하여 특정 슬롯에 콘텐츠를 전달할 수 있다.

자식 컴포넌트 (Child.vue)

<template>
  <div class="box">
    <header>
      <slot name="header">기본 헤더</slot>
    </header>
    <main>
      <slot>기본 내용</slot>
    </main>
    <footer>
      <slot name="footer">기본 푸터</slot>
    </footer>
  </div>
</template>

부모 컴포넌트 (Parent.vue)

<template>
  <Child>
    <template #header>
      <h1>커스텀 헤더</h1>
    </template>
    
    <p>메인 콘텐츠</p>

    <template #footer>
      <p>커스텀 푸터</p>
    </template>
  </Child>
</template>

🚀 결과:

<header>
  <h1>커스텀 헤더</h1>
</header>
<main>
  <p>메인 콘텐츠</p>
</main>
<footer>
  <p>커스텀 푸터</p>
</footer>

🠊 #header → <slot name="header">
🠊 #default → <slot>
🠊 #footer → <slot name="footer">

---

4️⃣ ⭐Scoped Slots (범위가 있는 슬롯)

◼️ 부모가 슬롯 내부에서 자식 컴포넌트의 데이터를 사용할 수 있도록 데이터를 전달하는 방식이다.

자식 컴포넌트 (Child.vue)

<template>
  <div>
    <slot :text="message"></slot>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const message = ref("자식 컴포넌트에서 전달된 메시지");
</script>

부모 컴포넌트 (Parent.vue)

<template>
  <Child v-slot="{ text }">
    <p>{{ text }}</p>
  </Child>
</template>

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

🚀 결과:

<p>자식 컴포넌트에서 전달된 메시지</p>

🠊 v-slot="{ text }"를 사용해 slot으로부터 데이터를 받아올 수 있다.

---

5️⃣ v-slot의 축약 문법

◼️ Vue 3에서는 v-slot을 #으로 줄여서 사용할 수 있다.

<Child #default="{ text }">
  <p>{{ text }}</p>
</Child>

이름 있는 슬롯에도 적용 가능

<Child #header>
  <h1>커스텀 헤더</h1>
</Child>

---

💬 그럼 <Component /> 직접 사용과 차이가 뭘까?

---

🔥 결론
✅ 기본 slot → 부모가 전달한 내용을 자식 컴포넌트의 특정 위치에 삽입
✅ 이름 있는 슬롯 → name을 사용하여 여러 개의 슬롯 관리
✅ Scoped Slots → 자식 컴포넌트의 데이터를 부모에게 전달 가능
✅ v-slot 축약 문법 → #default, #header 등 사용 가능

---

💡 B2B 프로젝트에서 자주 사용하는 슬롯 방식
◻️ 이름 있는 슬롯 (Named Slots)
▪️ 이유: B2B 시스템에서는 레이아웃이 일정하지만 일부만 다르게 변경되는 경우가 많음. 예를 들어, 테이블, 카드, 모달 같은 UI에서 헤더/바디/푸터를 구분해서 관리해야 하는 경우가 많다. #header, #footer 같은 구획별 슬롯을 사용하면 유지보수가 쉬워짐.

◻️ Scoped Slots
▪️ 이유: 테이블, 리스트, 드롭다운 같은 컴포넌트에서 데이터를 동적으로 표시할 때 유용함.
예를 들어, 조회 화면에서 백엔드에서 받은 데이터를 부모에서 가공하고 자식 컴포넌트에서 활용하는 경우. 데이터를 부모에서 전달하고, 자식에서 v-slot을 사용해 활용하는 방식이 좋음.

---

✅ B2B 프로젝트에서의 실제 예제
1️⃣ 이름 있는 슬롯 (Named Slots) 🠊 사용 예시: 조회 화면의 카드형 UI

◼️ 조회 화면에서 고객/계약 정보를 카드 형태로 표시할 때 사용.

CustomerCard.vue (자식 컴포넌트)

<template>
  <div class="card">
    <header><slot name="header">기본 제목</slot></header>
    <section><slot>기본 내용</slot></section>
    <footer><slot name="footer">기본 푸터</slot></footer>
  </div>
</template>

CustomerList.vue

<template>
  <CustomerCard>
    <template #header>
      <h2>VIP 고객</h2>
    </template>

    <p>고객명: 홍길동</p>
    <p>계약 상태: 활성</p>

    <template #footer>
      <button @click="viewDetail">상세 보기</button>
    </template>
  </CustomerCard>
</template>

📌 장점:
▪️ 레이아웃이 고정적이면서도, 헤더/바디/푸터를 유동적으로 변경 가능.
▪️ 여러 개의 카드에서 다른 콘텐츠를 쉽게 적용 가능.

---

2️⃣ Scoped Slots (범위가 있는 슬롯) 🠊 사용 예시: 고객 목록 테이블

◼️ v-for로 반복되는 데이터를 동적으로 표시해야 할 때 많이 사용됨.
CustomerCard.vue (자식 컴포넌트)

<template>
  <table>
    <thead>
      <tr>
        <th>이름</th>
        <th>계약 상태</th>
        <th>작업</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="customer in customers" :key="customer.id">
        <td>{{ customer.name }}</td>
        <td>{{ customer.status }}</td>
        <td>
          <slot name="actions" :customer="customer"></slot>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script setup>
import { defineProps } from 'vue';

defineProps({
  customers: Array,
});
</script>

CustomerList.vue (부모 컴포넌트)

<template>
  <CustomerTable :customers="customerList">
    <template #actions="{ customer }">
      <button @click="editCustomer(customer)">수정</button>
      <button @click="deleteCustomer(customer)">삭제</button>
    </template>
  </CustomerTable>
</template>

<script setup>
import CustomerTable from './CustomerTable.vue';

const customerList = [
  { id: 1, name: "홍길동", status: "활성" },
  { id: 2, name: "김철수", status: "비활성" }
];

const editCustomer = (customer) => {
  console.log("고객 수정:", customer);
};

const deleteCustomer = (customer) => {
  console.log("고객 삭제:", customer);
};
</script>

📌 장점:
▪️ 테이블에서 유동적인 작업 버튼을 쉽게 추가 가능.
▪️ 부모에서 데이터 가공 후 넘겨주고, 자식에서 활용 가능.
▪️ 다양한 형태의 버튼(조회, 수정, 삭제 등)을 상황에 맞게 다르게 표시 가능.

✅ 결론: B2B 프로젝트에서 가장 많이 쓰이는 슬롯

📌 이름 있는 슬롯 → 레이아웃이 일정한 UI
📌 Scoped Slots → 데이터를 활용하는 동적인 UI

B2B 프로젝트에서는 데이터 조회와 관리가 많기 때문에, Scoped Slots이 필수!
또한, 레이아웃이 반복되는 경우가 많아서 Named Slots도 자주 사용됨! 🚀