[Svelte]bind 지시자 사용 방법 및 Form 요소 바인딩

bind 지시자

Svelte에서는 다양한 지시자를 제공합니다. 그중 bind 지시자는 html의 기본 태그 또는 컴포넌트의 변수에 값을 바인딩하기 위해 사용됩니다.

 

값을 바인딩하기 위해서는 bind 지시문을 사용하며, 다음 예제처럼 script 영역에 선언된 변수와 input 태그를 바인딩할 수 있습니다.

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

<div>
  <input bind:value={textValue} />
  <p>{textValue}</p>
</div>

<style>
div {
  text-align: center;
}
</style>

[실행 결과]

bind:value 지시자가 input 태그에 입력된 값을 textValue라는 변수에 할당되고 <p> ~ </p> 태그 사이에 변수 textValue의 값을 출력합니다.

 

React는 input 태그와 state 변수의 값을 동기화하기 위해 onChange 이벤트 핸들러 함수에서 state의 값을 변경했는데, Svelte는 onChange 이벤트 핸들러 함수를 구현하지 않고 script 영역에 선언된 변수의 값을 변경합니다.

---

input 태그 바인딩 - number

다음 예제는 웹 브라우저 화면에서 숫자의 값을 변경하거나 슬라이더 값을 변경하면, 변수 numberValue의 값이 변경되는 것을 확인할 수 있습니다.

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

<div>
  <input bind:value={numberValue} type="number" min="0" max="10" />
  <input bind:value={numberValue} type="range" min="0" max="10" />
  <p>{numberValue}</p>
</div>

---

input 태그 바인딩 - checkbox

다음 예제는 input 태그의 type이 checkbox인 경우입니다. bind:checked 지시문으로 script 영역의 변수와 바인딩합니다.

<script>
  let checkValue = true;
</script>

<div>
  <input bind:checked={checkValue} type="checkbox" />
  <p>{checkValue}</p>
</div>

---

input 태그 바인딩 - 그룹 checkbox

checkbox를 그룹화해야 하는 경우 bind:group 지시문을 사용합니다.

 

다음 예제는 체크리스트를 {#each} 문으로 순회하여 체크박스를 화면에 추가하고 선택된 값을 bind:group 지시문에 바인딩합니다. input 태그의 value 속성에는 배열의 각 요소를 바인딩합니다.

<script>
  let checkList = [
    'A', 'B', 'C'
  ]
  let selectedValue = 'B';
</script>

<div>
  {#each checkList as menu}
    <label>
      <input bind:group={selectedValue} value={menu} type="checkbox" />
      {menu}
    </label>
  {/each}
  <p>{selectedValue}</p>
</div>

---

input 태그 바인딩 - 그룹 radio

다음 예제는 input 태그의 타입을 checkbox에서 radio로 변경하였습니다.

<script>
  let checkList = [
    'A', 'B', 'C'
  ]
  let selectedValue = 'B';
</script>

<div>
  {#each checkList as menu}
    <label>
      <input bind:group={selectedValue} value={menu} type="radio" />
      {menu}
    </label>
  {/each}
  <p>{selectedValue}</p>
</div>

---

textarea 태그 바인딩

textarea 태그는 텍스트 입력처럼 동작하며, bind:value 지시문을 사용하여 script 영역의 변수와 바인딩합니다.

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

<div>
  <textarea bind:value={textValue}/>
  <p>{textValue}</p>
</div>

---

select 태그 바인딩

Svelte는 객체를 값으로 바인딩하는 것을 허용합니다.

<script>
  let selectList = [
    {id: 1, text: 'A'},
    {id: 2, text: 'B'},
    {id: 3, text: 'C'}
  ];

  let selectedValue = {};
</script>

<div>
  <select bind:value={selectedValue}>
    {#each selectList as item}
      <option value={item}>
        {item.text}
      </option>
    {/each}
  </select>
  <p>{selectedValue.id} And {selectedValue.text}</p>
</div>

bind:value 지시문에 선택된 값을 바인딩하며, {#each} 문을 사용하여 select 태그의 항목을 추가합니다.