[Svelte] Checkbox inputs

앞선 장에서는 bind:value 지시자를 사용하여 양방향 데이터 바인딩을 살펴봤습니다. 이번 장에서는 bind:checked 지시자를 통해 Svelte에서 체크박스를 양방향 바인딩하는 방법을 알아보겠습니다.

<!-- App.svelte -->
<script>
  let yes = false;
</script>

<label>
  <input type="checkbox" bind:checked={yes}>
  Yes! Send me regular email spam
</label>

{#if yes}
  <p>
    Thank you. We will bombard your inbox and sell
    your personal details.
  </p>
{:else}
  <p>
    You must opt in to continue. If you're not
    paying, you're the product.
  </p>
{/if}

<button disabled={!yes}>Subscribe</button>

체크박스는 특정 상태를 설정하거나 해제하는 데 사용됩니다. bind:value 대신에 bind:checked를 사용하여 체크박스의 선택 상태를 바인딩합니다.

위 코드에서:

• type="checkbox" - 해당 요소가 체크박스임을 나타냅니다.
• bind:checked={yes} - yes라는 변수에 체크박스의 선택 상태를 양방향으로 바인딩합니다. 즉, yes의 값이 true이면 체크박스가 선택되고, false이면 해제됩니다. 또한 사용자가 체크박스를 클릭하면 yes의 값이 업데이트됩니다.

따라서 bind:checked 지시자를 사용하면 체크박스의 선택 상태를 간편하게 양방향으로 바인딩하여 폼 데이터 처리를 효율적으로 관리할 수 있습니다.

---