디렉티브는 HTML 요소에 추가되는 접두사로, 요소에 특정한 동작을 적용하기 위해 사용됩니다. Svelte에서는 “@” 기호를 사용하여 디렉티브를 정의합니다. 예시로, on:click, bind:value, class: 등이 있습니다.

디렉티브를 사용하려면 다음과 같은 단계를 따라야 합니다:

1. script 태그에 디렉티브를 사용할 변수 또는 함수를 정의합니다.

   <script>
     let count = 0;
      
     function handleClick() {
       count++;
     }
   </script>
   

2. HTML 요소에 디렉티브를 적용합니다. “@” 기호를 따르고, 디렉티브 이름을 적습니다.

   <button on:click={handleClick}>Click Me</button>
   <p>The count is {count}</p>
   

   위의 예시에서는 on:click 디렉티브를 사용하여 버튼 클릭 이벤트를 처리하고, bind:value 디렉티브를 사용하여 count 변수와 <p> 요소를 바인딩합니다.

이와 같이 디렉티브를 사용하여 Svelte에서 간편하게 DOM 요소를 조작하고 상호작용할 수 있습니다. Svelte의 공식문서를 참고하여 더 자세한 내용을 확인하실 수 있습니다.