Svelte에서 슬롯을 사용하는 방법

Svelte는 컴포넌트 간의 상호 작용을 위한 다양한 메커니즘을 제공하며, 여기에는 props와 슬롯이 포함됩니다. Svelte 애플리케이션에서 유연하고 재사용 가능한 컴포넌트를 만들기 위해서는 슬롯 활용이 필수적입니다.

Svelte에서 슬롯 이해하기

Svelte 프레임워크의 슬롯은 Vue의 슬롯과 유사하게 동작합니다. 이 기능은 상위 컴포넌트에서 하위 컴포넌트로 콘텐츠를 전달하는 방식을 제공합니다. 슬롯을 통해 컴포넌트 템플릿 내부에 자리 표시자를 정의하여 상위 컴포넌트로부터 콘텐츠를 삽입할 수 있도록 합니다.

이 콘텐츠는 단순 텍스트, HTML 마크업 또는 다른 Svelte 컴포넌트가 될 수 있습니다. 슬롯은 다양한 사용 사례에 맞춰 조정 가능한 동적이고 사용자 정의 가능한 컴포넌트 제작을 가능하게 합니다.

기본 슬롯 생성

Svelte에서 슬롯을 만들려면 컴포넌트 템플릿 내에서 <slot> 요소를 사용합니다. <slot> 요소는 상위 컴포넌트에서 전달될 콘텐츠의 자리 표시자 역할을 합니다. 기본적으로 슬롯은 전달된 모든 콘텐츠를 렌더링합니다.

기본 슬롯을 생성하는 방법의 예시는 다음과 같습니다.

 <main>
  이것은 하위 컴포넌트입니다
  <slot></slot>
</main>

위 코드 블록은 <slot> 요소를 사용하여 상위 컴포넌트로부터 콘텐츠를 받는 하위 컴포넌트를 나타냅니다.

상위 컴포넌트의 콘텐츠를 하위 컴포넌트로 전달하려면 먼저 하위 컴포넌트를 상위 컴포넌트로 가져와야 합니다. 그런 다음, 자체 닫는 태그 대신 열고 닫는 태그를 사용하여 하위 컴포넌트를 렌더링합니다. 마지막으로, 컴포넌트 태그 내에 상위-하위 컴포넌트 간에 전달하려는 콘텐츠를 작성합니다.

예를 들어:

 <script>
import Component from "./Component.svelte";
</script>
<main>
이것은 상위 컴포넌트입니다
<Component>
<span>이것은 상위 컴포넌트에서 온 메시지입니다</span>
</Component>
</main>
 

상위-하위 컴포넌트 간 콘텐츠 전달 외에도 슬롯에 대체/기본 콘텐츠를 제공할 수 있습니다. 이 콘텐츠는 상위 컴포넌트가 콘텐츠를 전달하지 않을 때 슬롯에 표시되는 내용입니다.

대체 콘텐츠를 전달하는 방법은 다음과 같습니다.

 <main>
  이것은 하위 컴포넌트입니다
  <slot>기본 콘텐츠</slot>
</main>

이 코드 블록은 상위 컴포넌트가 콘텐츠를 제공하지 않을 경우 표시될 슬롯의 대체 콘텐츠로 "기본 콘텐츠" 텍스트를 제공합니다.

슬롯 props를 사용하여 슬롯 간 데이터 전달

Svelte에서는 슬롯 props를 사용하여 슬롯에 데이터를 전달할 수 있습니다. 하위 컴포넌트의 일부 데이터를 슬롯에 삽입되는 콘텐츠로 전달해야 하는 경우 슬롯 props를 활용합니다.

예를 들어:

 <script>
  let message="안녕하세요, 상위 컴포넌트!"
</script>
<main>
  이것은 하위 컴포넌트입니다
  <slot message={message}></slot>
</main>
 

위 코드 블록은 Svelte 컴포넌트를 보여줍니다. 스크립트 태그 내에서 변수 message를 선언하고 "안녕하세요, 상위 컴포넌트!" 텍스트를 할당합니다. 또한 message 변수를 슬롯 prop message에 전달합니다. 이를 통해 상위 컴포넌트가 이 슬롯에 콘텐츠를 삽입할 때 message 데이터를 활용할 수 있습니다.

 <script>
import Component from "./Component.svelte";
</script>
<main>
이것은 상위 컴포넌트입니다
<Component let:message>
<div>
하위 컴포넌트 메시지: {message}
</div>
</Component>
</main>
 

let:message 구문을 사용하면 상위 컴포넌트가 하위 컴포넌트가 제공하는 message 슬롯 prop에 접근할 수 있습니다. div 태그 내의 message 변수는 message 슬롯 prop의 데이터입니다.

단일 슬롯 prop에 국한되지 않고 필요에 따라 여러 슬롯 props를 전달할 수 있습니다.

 <script>
  let user = {
    firstName: '길동',
    lastName: '홍'
  };
</script>
<main>
  이것은 하위 컴포넌트입니다
  <slot firstName={user.firstName} lastName={user.lastName}></slot>
</main>
 

상위 컴포넌트에서:

 <script>
import Component from "./Component.svelte";
</script>
<main>
이것은 상위 컴포넌트입니다
<Component let:firstName let:lastName>
<div>
사용자 이름: {firstName} {lastName}
</div>
</Component>
</main>
 

명명된 슬롯 사용

컴포넌트에 여러 슬롯을 전달해야 하는 경우 명명된 슬롯을 사용할 수 있습니다. 명명된 슬롯을 사용하면 각 슬롯에 고유한 이름을 지정하여 여러 슬롯을 더 쉽게 관리할 수 있습니다. 이를 통해 다양한 레이아웃으로 복잡한 컴포넌트를 구성할 수 있습니다.

명명된 슬롯을 만들려면 <slot> 요소에 name prop을 전달합니다.

 <div>
  이것은 하위 컴포넌트입니다
  
  <p>헤더: <slot name="header"></slot></p>
  <p>푸터: <slot name="footer"></slot></p>
</div>

이 예제에는 두 개의 명명된 슬롯인 header 슬롯과 footer 슬롯이 있습니다. 슬롯 prop을 사용하여 상위 컴포넌트의 각 슬롯에 콘텐츠를 전달할 수 있습니다.

예를 들어:

 <script>
import Component from "./Component.svelte";
</script>
<main>
이것은 상위 컴포넌트입니다
<Component>
<span slot="header">이 내용은 헤더 슬롯으로 전달됩니다</span>
<span slot="footer">이 내용은 푸터 슬롯으로 전달됩니다</span>
</Component>
</main>
 

이 코드는 slot prop을 사용하여 명명된 슬롯에 콘텐츠를 전달하는 방법을 보여줍니다. 첫 번째 span 태그는 slot prop을 값 header와 함께 전달합니다. 이를 통해 span 태그 내부의 텍스트가 header 슬롯에서 렌더링됩니다. 마찬가지로, slot prop 값이 footer인 span 태그 내부의 텍스트는 footer 슬롯에서 렌더링됩니다.

슬롯 전달 이해하기

슬롯 전달은 래퍼 컴포넌트를 통해 상위 컴포넌트의 콘텐츠를 하위 컴포넌트로 전달할 수 있는 Svelte 기능입니다. 이는 관련이 없는 컴포넌트의 콘텐츠를 전달해야 하는 경우 매우 유용할 수 있습니다.

슬롯 전달을 사용하는 방법의 예시는 다음과 같습니다. 먼저 하위 컴포넌트를 만듭니다.

 <main>
  이것은 하위 컴포넌트입니다
  <slot name="message"></slot>
</main>

다음으로 래퍼 컴포넌트를 만듭니다.

 <script>
  import Component from "./Component.svelte";
</script>
<main>
  <Component>
    <div slot="message">
      <slot name="wrapperMessage"></slot>
    </div>
  </Component>
</main>
 

이 코드 블록에서는 하위 컴포넌트의 message 슬롯으로 또 다른 명명된 슬롯을 전달합니다.

그런 다음 상위 컴포넌트에서 다음 코드를 작성합니다.

 <script>
import Wrapper from "./Wrapper.svelte";
</script>
<main>
이것은 상위 컴포넌트입니다
<Wrapper>
<div slot="wrapperMessage">
이것은 상위 컴포넌트에서 온 메시지입니다
</div>
</Wrapper>
</main>
 

위 구조에서 "이것은 상위 컴포넌트에서 온 메시지입니다"라는 내용은 래퍼 컴포넌트 내부의 wrapperMessage 슬롯 덕분에 래퍼 컴포넌트를 통해 하위 컴포넌트로 직접 전달됩니다.

Svelte 슬롯으로 더 편리한 개발

슬롯은 사용자 정의 가능하고 재사용 가능한 컴포넌트를 생성할 수 있도록 지원하는 Svelte의 강력한 기능입니다. 기본 슬롯을 생성하는 방법, 명명된 슬롯, 슬롯 prop 사용법 등을 배웠습니다. 다양한 유형의 슬롯과 그 사용법을 이해함으로써 동적이고 유연한 사용자 인터페이스를 구축할 수 있습니다.