[Svelte] Text inputs

Svelte에서 데이터 흐름은 일반적으로 top-down으로 이루어집니다. 즉, 부모 컴포넌트는 자식 컴포넌트의 props를 설정할 수 있고, 컴포넌트는 요소의 속성을 설정할 수 있지만, 반대의 경우는 불가능합니다.

<!-- App.svelte -->
<script>
  let name = 'world';
  
  function handleInput(event) {
    name = event.target.value;
  }
</script>

<input value={name} on:input={handleInput} />

<h1>Hello {name}!</h1>

하지만 때때 이 규칙을 깨뜨리는 것이 유용할 수 있습니다. 예를 들어 다음과 같은 컴포넌트에서 <input> 요소를 살펴보면 on:input 이벤트 핸들러를 추가하여 name의 값을 event.target.value로 설정할 수는 있지만 이는 다소 코드가 복잡합니다. 폼 요소가 많아질수록 이러한 문제는 더욱 심각해집니다.

이러한 경우 Svelte는 bind:value 지시자를 제공합니다.

<!-- App.svelte -->
<script>
  let name = 'world';
</script>

<input bind:value={name} />

<h1>Hello {name}!</h1>

bind:value 지시자는 다음과 같은 이점을 제공합니다.

• name의 값이 변경되면 입력 값이 업데이트됩니다.
• 입력 값이 변경되면 name의 값이 업데이트됩니다.

즉, bind:value 지시자를 사용하면 코드를 간결하게 유지하면서도 양방향 데이터 바인딩을 효과적으로 구현할 수 있습니다. 이는 특히 폼 요소 처리 시 매우 유용합니다.

---