Svelte의 bind 문법 더 자세하게 알아보기!

이미 Svelte의 bind 문법에 대해서는 한번 다룬적이 있는데요! (아래 참고)

Svelte의 bind 문법 완전 정복! 양방향으로 값을 주고받자! 🙌

공부하다보니 조금 헷갈렸던 부분이 있어서 함께 공유해보고자 합니다. ㅎㅎ

1. bind 문법이란?

Svelte에서 bind는 매우 강력한 기능으로, UI 요소의 값과 JavaScript 변수 간에 양방향 데이터 바인딩을 쉽게 해줍니다. 즉, UI에서 값이 바뀌면 변수도 즉시 업데이트되고, 반대로 변수가 바뀌면 UI도 즉시 반영돼요. 😲

양방향 바인딩이란?

• 사용자가 입력 필드에 값을 입력하거나, 체크박스를 클릭하면 그 값이 변수에 바로 전달됩니다.
• 변수 값이 바뀌면 그 값이 UI에 반영되죠. 그래서 이 과정은 양방향으로 값이 주고받는 거예요.

2. JavaScript의 이벤트 처리와 비교해보기

JavaScript에서 값을 감지하고 상태를 업데이트하려면 이벤트 리스너를 등록해야 하는데요, 이를 click 이벤트와 change 이벤트로 비교해볼게요.

1) click 이벤트 (Svelte의 on:click)

• JavaScript에서의 click 이벤트는 버튼이나 요소를 클릭했을 때 동작합니다.

document.querySelector('button').addEventListener('click', () => {
    console.log('Button was clicked!');
});

• Svelte에서는 on:click을 사용해서 이와 비슷하게 처리할 수 있습니다
  • 이 코드는 사용자가 클릭할 때만 실행되죠. 즉, 단방향 이벤트 처리입니다.

<button on:click={() => visible = !visible}>
    Toggle Element
</button>

2) change 이벤트 (Svelte의 bind)

• 반면, JavaScript의 change 이벤트는 입력 값이 변경되면 실행됩니다.

document.querySelector('input').addEventListener('change', (event) => {
    console.log('Input value changed to:', event.target.value);
});

• Svelte에서는 bind를 사용해서 값이 바뀌는 순간 자동으로 감지할 수 있어요
  • 값이 바뀌면 바로 inputValue 변수에 반영되죠. 이것이 바로 양방향 데이터 바인딩이에요!

<input bind:value={inputValue}>

3. bind 없이 vs bind와 함께

1) on:click으로 단방향 구현

먼저, on:click을 사용해 버튼을 클릭할 때 visible 값을 토글하는 예시입니다:

<script>
    let visible = false;
</script>

<button on:click={() => visible = !visible}>
    Toggle Element
</button>

{#if visible}
    <div>이 요소는 토글됩니다.</div>
{/if}

• 여기서는 버튼 클릭이라는 명시적인 이벤트가 발생해야 visible 값이 바뀌어요. 단방향 흐름이라고 할 수 있죠.

2) bind로 양방향 구현

이제, bind를 사용해 양방향 데이터 바인딩을 구현해볼게요.

<script>
    let visible = false;
</script>

<label>
    <input type="checkbox" bind:checked={visible}>
    요소 표시 여부
</label>

{#if visible}
    <div>이 요소는 체크박스에 따라 나타납니다.</div>
{/if}

• 사용자가 체크박스를 클릭하면 visible 값이 자동으로 업데이트되고, 그에 따라 화면의 요소가 즉시 반응하죠. 😊

4. input에서의 bind vs checkbox에서의 bind

input의 bind

• input 필드에서의 bind는 사용자가 입력하는 데이터를 그대로 변수에 전달합니다. 즉, 사용자가 입력한 값이 그대로 반영되는 거예요.

<input bind:value={inputValue}>

checkbox의 bind

• 반면, checkbox는 선택 여부라는 속성을 전달합니다. 사용자가 체크하면 true, 체크를 해제하면 false가 변수에 반영되죠.

<input type="checkbox" bind:checked={isChecked}>

• 둘 다 결국 값의 변화를 감지하지만, 입력 데이터를 다루느냐, 속성을 다루느냐의 차이가 있어요.

5. bind:value를 select와 함께 사용하기

이제 조금 더 복잡한 예시로, select 태그에서 bind:value를 사용하는 예시를 볼게요. 예를 들어, selectedOption이라는 변수가 있고 select 태그에서 선택한 값이 자동으로 이 변수에 반영되도록 할 수 있습니다:

<script>
    let selectedOption = 1;
</script>

<select bind:value={selectedOption}>
    <option value="1">옵션 1</option>
    <option value="2">옵션 2</option>
    <option value="3">옵션 3</option>
</select>

<p>선택된 옵션: {selectedOption}</p>

• 사용자가 옵션을 선택할 때마다 selectedOption 값이 업데이트됩니다. 이처럼 select와 bind:value를 함께 사용하면, 사용자가 선택한 값이 변수에 바로 반영되는 것을 볼 수 있어요!

6. Svelte에서 on:click vs bind

• on:click: JavaScript에서의 click 이벤트처럼, 사용자가 특정 요소를 클릭해야만 그 동작이 일어나요. 이 경우, 값이 변경되는 동작을 직접 코드로 명시해야 합니다.
  • 예: on:click={() => visible = !visible}
• bind: JavaScript에서의 change 이벤트처럼, 입력 필드나 체크박스 등의 값이 바뀌면, 그 변화를 자동으로 감지하고 변수에 반영해줘요. 그래서 bind는 값의 변화를 양방향으로 관리합니다.
  • 예: bind:checked={visible}

헷갈리지마세요⭐:

• input의 bind:value: 사용자가 입력한 데이터를 그대로 변수에 전달해요.
• checkbox의 bind:checked: 체크 여부라는 속성을 변수에 전달해요.