[Svelte] Select bindings

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

<!-- App.svelte -->
<script>
  let questions = [
    {
      id: 1,
      text: `Where did you go to school?`
    },
    {
      id: 2,
      text: `What is your mother's name?`
    },
    {
      id: 3,
      text: `What is another personal fact that an attacker could easily find with Google?`
    }
  ];

  let selected;

  let answer = '';

  function handleSubmit() {
    alert(`answered question ${selected.id} (${selected.text}) with "${answer}"`);
  }
</script>

<h2>Insecurity questions</h2>

<form on:submit|preventDefault={handleSubmit}>
  <select
    bind:value={selected}
    on:change={() => (answer = '')}
  >
      {#each questions as question}
        <option value={question}>
          {question.text}
        </option>
      {/each}
  </select>

  <input bind:value={answer} />

  <button disabled={!answer} type="submit">
    Submit
  </button>
</form>

<p>selected question {selected ? selected.id : '[waiting...]'}</p>

위 코드에서 :

• <select> : 선택 목록을 나타내는 HTML 요소입니다.
• bind:value={selected} : selected 변수에 select 요소의 선택된 값을 양방향으로 바인딩합니다. 사용자가 선택지를 변경하면 selected의 값이 업데이트되고, selected의 값이 변경되면 선택된 항목이 업데이트됩니다.
• on:change={() => answer = ''} : select 요소의 값이 변경될 때 answer 변수를 초기화하는 이벤트 핸들러입니다. (선택지를 변경하면 답변 입력값을 초기화하는 예시)

주의사항 :

• <option> 태그의 value 속성은 문자열이 아니라 객체여도 Svelte는 문제없이 처리합니다.
• selected 변수의 초기값을 설정하지 않으면 바인딩은 자동으로 기본값 (목록의 첫 번째 항목)을 설정합니다. 하지만 바인딩이 초기화되기 전까지는 selected가 아직 정의되지 않았으므로 템플릿에서 selected.id와 같은 코드를 사용할 수 없습니다.

따라서 bind:value 지시자를 사용하면 select 요소의 선택된 값을 양방향으로 바인딩하여 사용자 선택에 따라 데이터를 효과적으로 관리할 수 있습니다.