1. Svelte 컴포넌트에서 반응형 변수를 선언합니다. 반응형 변수는 $: 접두사를 사용하여 선언할 수 있습니다.

<script>
  let count = 0;

  $: doubleCount = count * 2;
</script>

1. HTML 템플릿에서 반응형 변수를 사용합니다. 이렇게 선언한 반응형 변수는 자동으로 업데이트됩니다.

<main>
  <h1>The count is {count}</h1>
  <h2>The double count is {doubleCount}</h2>

  <button on:click={() => count += 1}>Increment</button>
  <button on:click={() => count -= 1}>Decrement</button>
</main>

위의 예제에서, count 변수와 doubleCount 변수는 모두 반응형으로 선언되었습니다. count 변수의 값이 변경될 때마다, doubleCount 변수는 자동으로 업데이트됩니다.

이와 같이 Svelte에서 반응형 변수를 사용하는 것은 매우 간단하고 직관적입니다. 이 기능을 통해 컴포넌트의 상태를 쉽게 관리하고 UI를 업데이트할 수 있습니다.

더 자세한 내용은 Svelte 공식 문서를 참조하세요.