Svelte 특별한 Element를 만나다. - OhMinsSup/tip-review GitHub Wiki

Svelt는 다양한 내장 요소를 제공합니다.

1. svelte:self는 무엇일까???

이 엘리먼트는 컴포넌트가 재귀적으로 포함되도록 합니다. 이게 말의 의미는 이런것 같다. 만약 카테고리가 있다고 생각해보자. 상위 카테고리 안에는 하위 카테고리가 있고 하위 카테고리 안에는 더 하위에 있는 카테고리가 존재할 것이다. 그럴경우 똑같은 데이터 형태를 가진 카테고리들이 계속 하위요소로 그려지게 될 것이다. 그럴경우에 만약 svelte:self를 이용 할 경우 자기 자신의 컴포넌트를 재귀적으로 계속 그려주게 될 것 입니다.

<!-- APP.svelte -->
<script>
  import Category from "./Category.svelte";

  let root = [
    {
      name: "상위 카테고리 1번",
      categorys: []
    },
    {
      name: "상위 카테고리 2번",
      categorys: [
        {
          name: "상위 2번의 하위 카테고리 1번",
          categorys: []
        },
        {
          name: "상위 2번의 하위 카테고리 2번",
          categorys: [
            {
              name: "하위 2번의 더 낮은 하위 카테고리 1번"
            }
          ]
        }
      ]
    }
  ];
</script>

<Category name="Home" categorys={root} />
<!-- Category.svelte -->
<script>
  export let name;
  export let categorys;
</script>

<style>
  span {
    padding: 0 0 0 1.5em;
    background: url(tutorial/icons/folder.svg) 0 0.1em no-repeat;
    background-size: 1em 1em;
    font-weight: bold;
    cursor: pointer;
  }

  ul {
    padding: 0.2em 0 0 0.5em;
    margin: 0 0 0 0.5em;
    list-style: none;
    border-left: 1px solid #eee;
  }

  li {
    padding: 0.2em 0;
  }
	
</style>

<span>{name}</span>

{#if categorys}
<ul>
  {#each categorys as category}
  <li>
	  <svelte:self {...category} />
	</li>
  {/each}
</ul>
{/if}

2. svelte:component

구성 요소는 svelte:component를 사용하여 범주를 모두 변경할 수 있습니다.

<script>
	import RedThing from './RedThing.svelte';
	import GreenThing from './GreenThing.svelte';
	import BlueThing from './BlueThing.svelte';

	const options = [
		{ color: 'red',   component: RedThing   },
		{ color: 'green', component: GreenThing },
		{ color: 'blue',  component: BlueThing  },
	];

	let selected = options[0];
</script>

<select bind:value={selected}>
	{#each options as option}
		<option value={option}>{option.color}</option>
	{/each}
</select>

<svelte:component this={selected.component}/>
⚠️ **GitHub.com Fallback** ⚠️