데이터 바인딩을 사용하려면 먼저 주어진 데이터를 변경할 수 있는 변수를 정의해야 합니다. Svelte에서는 let 키워드를 사용하여 변수를 선언합니다. 예를 들어, 다음과 같이 count라는 변수를 선언할 수 있습니다.

let count = 0;

이제 count 변수를 원하는 곳에 바인딩하여 값을 변경하고 업데이트할 수 있습니다. 예를 들어, 다음과 같이 <p> 요소를 count 변수에 바인딩할 수 있습니다.

<script>
  let count = 0;
</script>

<main>
  <p>{count}</p>
</main>

이렇게 하면 count 변수의 값이 변경될 때마다 <p> 요소도 자동으로 업데이트됩니다. 이것이 Svelte의 데이터 바인딩의 강력한 기능입니다.

데이터 바인딩은 단방향 및 양방향 바인딩으로 구현될 수 있습니다. 단방향 바인딩은 한쪽 방향으로만 데이터를 전달하는 것을 의미하며, 일반적으로 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 데 사용됩니다. 양방향 바인딩은 데이터의 양방향 흐름을 지원하며, 주로 입력 필드와 같은 사용자 입력 요소에 사용됩니다.

Svelte에서는 양방향 바인딩을 지원하기 위해 bind: 접두사를 사용합니다. 예를 들어, 다음과 같이 <input> 요소를 name 변수에 양방향으로 바인딩할 수 있습니다.

<script>
  let name = '';
</script>

<main>
  <input type="text" bind:value="{name}">
  <p>Hello, {name}!</p>
</main>

이제 사용자가 <input> 필드에 입력을 하면 name 변수의 값도 자동으로 업데이트되며, 업데이트된 값은 {name} 표현식을 사용하여 출력됩니다.

이런 식으로 Svelte에서 데이터 바인딩을 사용할 수 있습니다. 데이터 바인딩을 통해 애플리케이션의 동적인 동작을 쉽게 구현할 수 있으며, 개발자가 수동으로 DOM을 조작하는 번거로움을 덜 수 있습니다. Svelte 문서에서 더 자세한 내용을 확인할 수 있으니 참고하시기 바랍니다.