[Svelte] 스벨트 전개(Spread) 프로퍼티와 슬롯(Slot) 사용하기

 

 

 

 

 

 

🌈 Each문에서의 Spread 프로퍼티 및 Slot 사용 방법

Svelte.js - 완벽 가이드의 [섹션 6:: 컴포넌트에 대해 자세히 알아보기] 를 수강한 후에 정리한 내용이다.

 

 

 

 

1️⃣ Spread 프로퍼티

기존에는 컴포넌트를 랜더하기 위해 each문을 쓸 때 아래와 같이 프로퍼티를 일일이 추가해 주었다.

<!-- Spread 프로퍼티 -->
{#each products as product}
<Product
    title = product.title
    price = product.price
    ...
/>
{/each}

 

하지만 ES6의 전개연산자와 비슷하게 아래와 같은 문법을 사용함으로써 간결한 코드를 작성할 수 있다.

{#each products as product}
<Product
    {...product}
/>
{/each}

 

 

2️⃣ Slot

상위 컴포넌트에서 하위 컴포넌트 사이에 태그를 작성하였을 때, 해당 하위 컴포넌트에서 slot태그가 존재하여야만 결과가 출력된다. 만약 slot 태그 없이 App.svelte에서 Modal 사이에 태그를 작성한다면 해당 태그는 랜더 되지 않는다.

<!-- App.svelte -->
<Modal>
    <h1>Hello</h1>
    <p>This works!</p>
</Modal>


<!-- Modal.svelte -->
<div>
    <slot />
</div>

 

 

3️⃣ namedSlot

슬롯에 이름을 지정할 수 있으며, 이름 있는 슬롯과 이름 없는 슬롯이 함께 존재하는 경우 이름 없는 슬롯이 기본 슬롯이 된다. 또한, 이름 없는 기본 슬롯은 한 개만 존재해야 한다.

<!-- App.svelte -->
<Modal>
    <h1 slot="header">Hello</h1>
    <p>This works!</p>
</Modal>


<!-- Modal.svelte -->
<div>
    <header>
        <slot name="header"/>
    <header>
    <div>
        <slot />
    </div>
</div>