[Svelte] 스벨트의 특수한 컴포넌트 (Dynamic, Recursive)

 

 

 

 

 

 

🌈 스벨트의 특수한 컴포넌트 정리

스벨트에서 제공하는 특수한 컴포넌트에는 동적(Dynamic) 컴포넌트와 재귀(Recursive) 컴포넌트 그리고 윈도우 객체를 다룰 수 있는 윈도우 컴포넌트, 교차(Cross) 컴포넌트가 있다.

 

 

 

 

1️⃣ 동적(Dynamic) 컴포넌트

분기를 통해 다른 컴포넌트를 보여주어야 할 때 스밸트의 동적 컴포넌트를 이용하여 코드를 쉽게 작성할 수 있다.

 

 <scelte:component this={컴포넌트명}>

<!-- App.svelte -->
<script>
  import Product from "./Product.svelte";
  import CartItem from "./CartItem.svelte";

  let renderedComponent = { cmp: Product, title: "Test Product", id: "p1" };

  function toggle() {
    if (renderedComponent.cmp === Product) {
      renderedComponent = { cmp: CartItem, title: "Another Product", id: "p2" };
    } else {
      renderedComponent = { cmp: Product, title: "Test Product", id: "p1" };
    }
  }
</script>

<button on:click={toggle}>Toggle Display</button>

<svelte:component 
    this={renderedComponent.cmp} 
    title={renderedComponent.title} 
    id={renderedComponent.id} />

 

 

 

 

2️⃣ 재귀(Recursive) 컴포넌트

재귀 컴포넌트는 each문에서 트리 구조의 렌더링시 사용한다.

 

<svelte:self />

<!-- App.svelte -->
<script>
  import FamilyNode from "./FamilyNode.svelte";

  let familyStructure = [
    {
      isParent: true,
      name: "Chris",
      children: [
        {
          isParent: true,
          name: "Moe",
          children: [{ isParent: false, name: "Julie" }]
        }
      ]
    },
    { isParent: false, name: "Anna" }
  ];

</script>

{#each familyStructure as familyMember}
  <FamilyNode member={familyMember} />
{/each}

 

아래 코드에서 트리 구조를 표현하기 위해 each에서 재귀 컴포넌트(svelte:self)를 사용하였다.

<!-- FamilyNode.svelte -->
<script>
  export let member;
</script>

<style>
  div {
    margin-left: 2rem;
  }
</style>

<div>
  <h1>{member.name}</h1>
  {#if member.isParent}
    {#each member.children as child}
      <svelte:self member={child} />
    {/each}
  {/if}
</div>

 

 

 

 

3️⃣ 윈도우 컴포넌트

윈도우 컴포넌트란 윈도우 객체와 상호 작용하는 컴포넌트를 말한다.

 

윈도우 컴포넌트는 사용하지 않고 스크립트단에서 window 객체를 사용해도 되지만,

페이지의 환경과 상호작용하는 svelte의 특성상 상태 변화를 관리하기에 유리하며 이벤트를 바인딩하여 사용하기에도

편리하기 때문에 사용해 볼 법하다.

<svelte:window on:{event} />
<svelte:head on:{event} />
<svelte:body on:{event} />

 

 

 

 

4️⃣ 교차 컴포넌트(cross-component)

교차 컴포넌트는 컴포넌트에 있는 스크립트를 단 한 번만 실행되도록 한 것이다.

<script context="module">
	// 이 태그에 있는 코드는 인스턴스가 아닌 파일단위
	// 즉, 컴포넌트 단위로 한 번 실행된다. 
</script>