[Svelte]슬롯(slot)이란?

슬롯(slot)이란?

부모 컴포넌트가 자식 컴포넌트에게 콘텐츠를 전달하는 것을 슬롯(slot)이라고 말합니다.

 

예를 들어 <div> ~ </div> 태그 사이에 다른 HTML 태그를 작성할 수 있는 것처럼

<div>
  <h2>Hello!</h2>
  <p>Name: 홍길동</p>
  <p>Age: 20</p>
</div>

컴포넌트 사이에도 HTML 태그를 작성할 수 있으며, HTML 태그가 아닌 다른 컴포넌트가 중첩될 수 있습니다.

<ChildComponent>
  <h2>Hello!</h2>
  <p>Name: 홍길동</p>
  <p>Age: 20</p>
</ChildComponent>

부모 컴포넌트에게 전달받은 콘텐츠를 <slot />으로 표시할 수 있으며, <slot />를 기본 슬롯이라고 부릅니다. Svelte의 슬롯(slot)은 React의 합성(Composition)과 유사합니다.

합성 (Composition) vs 상속 (Inheritance) – React

[부모 컴포넌트 - App.svelte]

<script>
  import ChildComponent from './Child.svelte';
</script>

<div>
  <ChildComponent>
    <h2>Hello!</h2>
    <p>Name: 홍길동</p>
    <p>Age: 20</p>
  </ChildComponent>
</div>

<style>
div {
  text-align: center;
}
</style>

[자식 컴포넌트 - Child.svelte]

<div>
  <h1>부모 컴포넌트에게 전달받은 콘텐츠</h1>
  <slot />
</div>

[실행 결과]

---

Fallback 슬롯

부모 컴포넌트에게 전달받은 콘텐츠가 없는 경우 <slot> ~ </slot> 사이에 Fallback을 설정할 수 있습니다. Fallback은 "대체"라는 의미를 가지며 Default 값이라고 생각하면 되겠습니다.

 

먼저, 부모 컴포넌트가 콘텐츠를 전달하는 경우입니다.

 

[부모 컴포넌트 - App.svelte]

<script>
  import ChildComponent from './Child.svelte';
</script>

<div>
  <ChildComponent>
    <h2>Hello!</h2>
    <p>Name: 홍길동</p>
    <p>Age: 20</p>
  </ChildComponent>
</div>

<style>
div {
  text-align: center;
}
</style>

[자식 컴포넌트 - Child.svelte]

<div>
  <h1>부모 컴포넌트에게 전달받은 콘텐츠</h1>
  <slot>
    전달받은 콘텐츠가 없습니다.
  </slot>
</div>

[실행 결과]

 

다음 예제는 부모 컴포넌트가 자식 컴포넌트에게 콘텐츠를 전달하지 않습니다.

 

[부모 컴포넌트 - App.svelte]

<script>
  import ChildComponent from './Child.svelte';
</script>

<div>
  <ChildComponent>
  </ChildComponent>
</div>

<style>
div {
  text-align: center;
}
</style>

[자식 컴포넌트 - Child.svelte]

<div>
  <h1>부모 컴포넌트에게 전달받은 콘텐츠</h1>
  <slot>
    전달받은 콘텐츠가 없습니다.
  </slot>
</div>

[실행 결과]

---

명명된 여러 슬롯

슬롯 이름을 지정하는 명명된 슬롯을 사용하면 부모 컴포넌트가 자식 컴포넌트에게 여러 콘텐츠를 한 번에 전달할 수 있습니다.

 

먼저, 부모 컴포넌트에서 HTML 요소에 slot 속성과 이름을 명시합니다.

 

[부모 컴포넌트 - App.svelte]

<script>
  import ChildComponent from './Child.svelte';
</script>

<div>
  <ChildComponent>
    <span slot="name">
      <p>Name: 홍길동</p>
    </span>

    <span slot="age">
      <p>Age: 20</p>
    </span>

    <span slot="address">
      <p>Address: 대한민국 서울 어딘가</p>
    </span>
  </ChildComponent>
</div>

<style>
div {
  text-align: center;
}
</style>

자식 컴포넌트는 여러 slot을 추가할 수 있으며, slot의 name 속성에는 부모 컴포넌트에서 명시한 slot 속성의 이름과 매핑시킵니다.

 

[자식 컴포넌트 - Child.svelte]

<div>
  <h1>부모 컴포넌트에게 전달받은 콘텐츠</h1>
  <slot name="name">
    전달받은 이름이 없습니다.
  </slot>
  <slot name="age">
    전달받은 나이가 없습니다.
  </slot>
  <slot name="address">
    전달받은 주소가 없습니다.
  </slot>
</div>

[실행 결과]

---

정리

• 컴포넌트는 props뿐만 아니라 컴포넌트 및 HTML 태그를 전달할 수 있습니다.
• 자식 컴포넌트는 <slot> ~ </slot>을 사용하여 부모 컴포넌트에게 전달받은 콘텐츠를 표시합니다.