[Svelte] Svelte 기본문법 #3 (Slot)

Slot이란?

- 공통 레이아웃을 가진 Component에 props 데이터 이외에 마크업을 전달해서 렌더링 시켜야할 때 Slot을 사용할 수 있다.
- 형태 : <slot></slot>

1) 사용법

// Card.svelte
<div class="card">
   <slot></slot>
</div>

// main.svelte
import Card from './Card.svelte';
...
<Card> // Card 컴포넌트 내부 Slot에 매핑될 Html 형태의 내용을 입력한다.
   <h2> 안녕하세요. </h2>
   <p> 반갑습니다.</p>
</Card>

2) 이름이 있는 Slot

 // Card.svelte
<div class="card">   //name 속성으로 slot에 이름을 지정
   <slot name="introduce"></slot>
   <slot name="card_name"></slot>
</div>

// main.svelte
import Card from './Card.svelte';
...
<Card>
   <div slot="introduce"> // slot 속성으로 매핑할 slot name을 입력
      <h2> 안녕하세요. </h2>
      <p> 반갑습니다.</p>
   </div>
   <div slot="card_name">
      <p> 청첩장 </p>
   </div>   
</Card>

3) $$slots - 슬롯 사용여부

// Card.svelte
<div class="card">
   {#if $$slots.email}  // email 이름의 슬롯 사용여부 체크 
      <slot name="email"></slot>
   {/if}
</div>

// main.svelte
import Card from './Card.svelte';
...
<Card>
   ...
   <div slot="email">
      <p> email@email.com </p>
   </div>   
</Card>

4) Flagment

- 의미없는 div 태그 사용으로 css의 오동작 이슈가 생길 경우 flagment 태그 활용

<svelte:fragment slot="footer">
   <p> test </p>
</svelte:fragment>

 

 

참고사이트

https://svelte.dev/docs/introduction

https://www.inflearn.com/course/lecture?courseSlug=%EC%8A%A4%EB%B2%A8%ED%8A%B8-%EC%8B%9C%EC%9E%91-%EC%9B%B9-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C&unitId=152818&tab=curriculum