슬롯 (Slot)을 이용한 컴포넌트 커스터마이징

 슬롯은 Vue에서 컴포넌트의 일부를 커스터마이징하는 강력한 기능입니다. 슬롯을 사용하면 컴포넌트의 특정 영역에 사용자 정의 내용을 삽입할 수 있으므로, 재사용성과 유연성을 높일 수 있습니다. Vue에서 슬롯을 이용한 컴포넌트 커스터마이징 방법을 알아봅시다.

1. 기본 슬롯

기본 슬롯은 컴포넌트의 특정 영역에 사용자가 정의한 내용을 삽입할 수 있는 기능입니다. 컴포넌트의 템플릿에 <slot></slot>을 작성하여 슬롯을 정의합니다.

// 자식 컴포넌트
Vue.component('child-component', {
  template: `
    <div>
      <h2>커스터마이즈 가능한 제목</h2>
      <slot></slot>
    </div>
  `
});

위의 코드에서 <slot></slot>은 기본 슬롯을 정의한 것입니다. 사용자가 컴포넌트를 사용할 때, 해당 영역에 내용을 삽입할 수 있습니다.

<div id="app">
  <child-component>
    <p>커스터마이즈 가능한 내용입니다.</p>
  </child-component>
</div>

부모 컴포넌트에서 <child-component> 태그로 자식 컴포넌트를 사용하고, <p> 태그를 통해 내용을 작성하여 기본 슬롯에 삽입할 수 있습니다.

2. 이름 있는 슬롯

이름 있는 슬롯은 여러 개의 슬롯을 사용하고 싶을 때 사용합니다. 컴포넌트의 템플릿에서 <slot name="slotName"></slot> 형식으로 이름 있는 슬롯을 정의하고, 부모 컴포넌트에서는 v-slot 디렉티브를 사용하여 특정 슬롯에 내용을 할당합니다.

// 자식 컴포넌트
Vue.component('child-component', {
  template: `
    <div>
      <h2>이름 있는 슬롯</h2>
      <slot name="content"></slot>
      <slot name="footer"></slot>
    </div>
  `
});

위의 코드에서 <slot name="content"></slot>와 <slot name="footer"></slot>는 이름 있는 슬롯을 정의한 것입니다.

<div id="app">
  <child-component>
    <template v-slot:content>
      <p>컨텐츠 영역에 들어갈 내용입니다.</p>
    </template>
    <template v-slot:footer>
      <p>푸터 영역에 들어갈 내용입니다.</p>
    </template>
  </child-component>
</div>

부모 컴포넌트에서 <template> 태그를 사용하여 v-slot 디렉티브를 통해 특정 슬롯에 내용을 할당할 수 있습니다.

슬롯을 사용하면 컴포넌트의 일부를 유연하게 커스터마이징할 수 있습니다. 기본 슬롯과 이름 있는 슬롯을 활용하여 컴포넌트의 내용을 동적으로 변경하고, 재사용 가능한 컴포넌트를 작성할 수 있습니다. 위의 내용을 참고하여 실습을 진행해보세요.