[Svelte] input type="text" change event

Svelte에서 on:input 이벤트 처리하기

Svelte에서 폼을 다룰 때, 사용자의 입력에 실시간으로 반응해야 하는 경우가 많습니다. 이번 블로그 글에서는 on:input 이벤트를 처리하여 입력 필드의 값이 변경될 때마다 변수를 업데이트하는 방법을 알아보겠습니다.

입력 필드 설정

먼저, Svelte에서 기본적인 입력 필드를 설정해보겠습니다. 입력 값을 변수에 바인딩하고, on:input 이벤트를 사용하여 입력이 변경될 때마다 함수를 호출합니다.

svelte

<script>
  let searchText = '';

  function searchFilter() {
    console.log('변경된 입력 값:', searchText);
  }
</script>

<input type="text" id="search" bind:value={searchText} on:input={searchFilter} />

이 예제에서는 id가 "search"인 입력 필드를 만들었습니다. Svelte의 bind:value 지시어를 사용하여 입력 필드의 값을 searchText 변수에 바인딩합니다. 이를 통해 searchText가 항상 입력 필드의 값과 동기화됩니다.

on:input 이벤트 처리

on:input 이벤트는 사용자가 입력 필드에 타이핑할 때마다 트리거됩니다. 이 이벤트에 searchFilter 함수를 연결하여 입력 값이 변경될 때마다 작업을 수행할 수 있습니다.

svelte

<input type="text" id="search" bind:value={searchText} on:input={searchFilter} />

searchFilter 함수는 입력 값이 변경될 때마다 호출됩니다. 이 예제에서는 단순히 searchText의 새로운 값을 콘솔에 로그로 출력합니다. 그러나 이 함수를 사용자 정의하여 항목 목록을 필터링하거나 API 호출을 수행하는 등 다양한 작업을 수행할 수 있습니다.

예제: 목록 필터링

사용자의 입력에 따라 항목 목록을 필터링하는 예제를 확장해보겠습니다. 항목 목록을 만들고, 입력 값이 변경될 때마다 표시되는 항목을 업데이트합니다.

svelte

<script>
  let searchText = '';
  let items = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
  let filteredItems = items;

  function searchFilter() {
    filteredItems = items.filter(item => item.toLowerCase().includes(searchText.toLowerCase()));
  }
</script>

<input type="text" id="search" bind:value={searchText} on:input={searchFilter} />

<ul>
  {#each filteredItems as item}
    <li>{item}</li>
  {/each}
</ul>

이 예제에서는 항목 목록과 초기값이 전체 목록으로 설정된 filteredItems 배열을 가지고 있습니다. searchFilter 함수는 사용자의 입력에 따라 filteredItems를 업데이트하여 검색 텍스트와 일치하는 항목만 포함하도록 필터링합니다.

결론

Svelte에서 on:input 이벤트를 처리하는 것은 간단하면서도 강력합니다. 입력 값을 변수에 바인딩하고 on:input 이벤트를 사용하여 실시간으로 사용자 입력에 반응할 수 있습니다. 목록을 필터링하거나 API 호출을 수행하는 등 다양한 작업을 쉽게 처리할 수 있습니다.