Svelte에서는 다양한 디렉티브를 사용할 수 있습니다. 가장 일반적으로 사용되는 디렉티브 몇 가지를 살펴보겠습니다.

if 디렉티브

if 디렉티브를 사용하면 조건부로 엘리먼트를 렌더링할 수 있습니다. 예를 들어, 특정 조건이 참일 경우에만 엘리먼트를 표시할 수 있습니다.

{#if condition}
    <p>This element will be rendered if the condition is true.</p>
{/if}

each 디렉티브

each 디렉티브를 사용하면 배열을 반복하며 엘리먼트를 렌더링할 수 있습니다. 각 배열 요소에 대한 반복 작업이 필요한 경우 유용합니다.

{#each items as item}
    <li>{item}</li>
{/each}

on: 디렉티브

on: 디렉티브를 사용하면 이벤트 리스너를 추가할 수 있습니다. 사용자의 동작에 반응하고 해당 이벤트를 처리할 수 있습니다.

<button on:click={handleClick}>Click me</button>

bind: 디렉티브

bind: 디렉티브를 사용하면 컴포넌트의 상태와 입력 요소를 양방향으로 바인딩할 수 있습니다. 사용자 입력에 따라 상태가 업데이트되고, 반대로 상태 변경이 입력 요소에 반영됩니다.

<input type="text" bind:value={name}>

위의 예제에서 입력 요소의 값이 name 변수와 양방향으로 바인딩되어 있습니다.

이 외에도 transition, class, style 등 다양한 디렉티브가 있으며 Svelte 공식 문서에서 자세한 정보를 확인할 수 있습니다. 새로운 프론트엔드 프로젝트를 개발하거나 Svelte를 공부하고 있는 경우 디렉티브를 적절하게 활용하여 웹 애플리케이션을 더 동적이고 상호작용적으로 만들 수 있습니다.

참고: 이 문서에서는 Svelte 3 버전을 기준으로 작성되었습니다.