Svelte의 Slot 완전정복! 컴포넌트 안에서 자유롭게 데이터를 전달하는 방법 🌟

1. Slot이란 무엇인가요?

Svelte에서 slot은 하위 컴포넌트가 상위 컴포넌트에서 어떤 내용을 채워넣을지 정의할 수 있게 하는 기능이에요. 즉, 하위 컴포넌트의 특정 영역을 비워두고, 상위 컴포넌트에서 그 안에 들어갈 내용을 동적으로 넣어줄 수 있다는 것이죠!

간단히 말해서, 컴포넌트의 특정 부분을 동적으로 채울 수 있도록 빈 공간을 제공하는 거예요. 이렇게 하면 하위 컴포넌트를 재사용할 때 다양한 방식으로 활용할 수 있게 됩니다.

2. Slot을 언제 사용할까요?

1. 반복적으로 쓰이는 컴포넌트를 재사용할 때: 예를 들어, 버튼 컴포넌트나 카드 컴포넌트 같은 것들을 만들 때, 내부의 콘텐츠만 달라지고 나머지 구조는 동일하다면, slot을 이용해 콘텐츠를 동적으로 채워넣을 수 있어요.
2. 동적으로 변경될 수 있는 콘텐츠를 포함한 컴포넌트를 만들 때: 하위 컴포넌트에서 기본 구조를 제공하고, 상위 컴포넌트에서 그 구조를 어떻게 사용할지 유연하게 결정할 수 있습니다.

3. Slot의 기본 사용 방법

3-1. 기본적인 Slot 사용 방법

먼저, 하위 컴포넌트에서 slot을 사용해보겠습니다. 이 slot은 상위 컴포넌트가 어떤 내용을 채워넣을지 결정할 수 있는 공간이에요.

<!-- 하위 컴포넌트: Child.svelte -->
<div class="box">
    <slot></slot> <!-- 상위 컴포넌트에서 들어오는 콘텐츠를 받을 공간 -->
</div>

<style>
    .box {
        padding: 10px;
        border: 1px solid #ddd;
        background-color: #f9f9f9;
    }
</style>

이제 이 하위 컴포넌트를 상위 컴포넌트에서 사용해볼게요.

<!-- 상위 컴포넌트: Parent.svelte -->
<script>
    import Child from './Child.svelte';
</script>

<Child>
    <p>이 내용은 상위 컴포넌트에서 넘어온 것입니다!</p>
</Child>

Child 컴포넌트에 있는 <slot></slot> 부분에 상위 컴포넌트에서 전달된 <p> 태그가 그대로 들어가게 됩니다. 이 방식으로 하위 컴포넌트는 동일한 구조를 유지하면서도, 상위 컴포넌트에 따라 다른 콘텐츠를 보여줄 수 있어요.

4. Named Slot: 이름이 있는 Slot

경우에 따라 컴포넌트에서 여러 개의 slot을 사용할 수 있어요. 이때는 각각의 slot에 이름을 부여해서 상위 컴포넌트가 어느 slot에 무엇을 넣을지 정할 수 있습니다.

4-1. Named Slot 사용 방법

<!-- 하위 컴포넌트: Card.svelte -->
<div class="card">
    <header>
        <slot name="header"></slot> <!-- 이름이 있는 slot -->
    </header>
    <section>
        <slot></slot> <!-- 이름이 없는 기본 slot -->
    </section>
    <footer>
        <slot name="footer"></slot> <!-- 이름이 있는 slot -->
    </footer>
</div>

<style>
    .card {
        border: 1px solid #ddd;
        padding: 15px;
        border-radius: 8px;
    }
</style>

이제 상위 컴포넌트에서 각각의 slot에 맞는 콘텐츠를 넣어줄 수 있습니다.

<!-- 상위 컴포넌트: App.svelte -->
<script>
    import Card from './Card.svelte';
</script>

<Card>
    <span slot="header">카드의 헤더입니다</span>
    <p>이것은 본문 내용입니다.</p>
    <span slot="footer">카드의 푸터입니다</span>
</Card>

이 예시에서는 Card 컴포넌트의 header, footer, 본문 영역에 각각 상위 컴포넌트에서 지정한 콘텐츠가 들어가게 돼요.

5. Slot을 왜 사용할까요?

slot의 가장 큰 장점은 컴포넌트의 재사용성을 극대화할 수 있다는 점이에요. 하위 컴포넌트의 구조는 변하지 않지만, 상위 컴포넌트에서 그 내부의 내용을 다양하게 조정할 수 있기 때문에, 한 번 만들어 놓은 컴포넌트를 다양한 상황에서 유연하게 활용할 수 있죠. 이를 통해 코드를 더 깔끔하고 관리하기 쉽게 만들 수 있어요.

6. 헷갈리지 마세요! ⭐

• slot은 하위 컴포넌트가 상위 컴포넌트에서 무엇을 보여줄지 결정할 수 있는 공간이에요!
• 기본적으로 slot은 이름이 없어도 되지만, 여러 개의 slot을 사용하려면 이름을 붙여줘야 합니다!
• slot은 하위 컴포넌트가 무조건적으로 상위 컴포넌트에서 콘텐츠를 받아야 할 때 유용해요!

이렇게 slot을 사용하면 컴포넌트를 더 유연하게 만들 수 있답니다 :)