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

1. Svelte에서의 bind란?

자, Svelte에서 bind는 양방향 데이터 바인딩을 가능하게 하는 아주 중요한 도구인데요. 여기서 양방향 바인딩은 Two-way Binding이라고 불리는데, 말 그대로 값을 주고받는 과정? 같은 거라고 생각하면 쉬워요. 사용자가 입력한 값이 즉시 변수에 반영되고, 그 변수의 변화도 화면에 실시간으로 나타나는 거예요.

이걸 좀 더 쉽게 말하자면, 사용자가 input에 뭔가를 입력하면 그 값이 곧바로 자바스크립트 변수에 저장되고, 그리고 그 변수 값이 변하면 다시 화면에도 바로 반영되는 것처럼 svelte에서도 완전히 실시간으로 상호작용이 가능한 것으로 생각하면 됩니다!

JavaScript에서의 bind는?

JavaScript의 bind()는 함수와 관련된 용어예요. 특정 함수에서 this의 값을 명확하게 고정하고 싶을 때 사용하죠. 즉, 어떤 객체의 메서드를 다른 객체에서도 동일한 this로 실행하고 싶을 때 쓰는 건데요.

const person = {
    name: 'John',
    sayName() {
        console.log(this.name);
    }
};

const otherPerson = { name: 'Jane' };
const sayOtherPersonName = person.sayName.bind(otherPerson);
sayOtherPersonName(); // 'Jane'

이렇게 하면 otherPerson의 name을 person의 sayName 함수로 실행할 수 있어요. 여기서는 this가 person이 아니라 otherPerson을 가리키게 되죠?

그러나 반면, Svelte의 bind는 이와 다르게 UI와 자바스크립트 값의 양방향 데이터 흐름을 관리하는 역할을 합니다.

2. Svelte에서 bind 없이 사용하는 경우 - One-way Binding

먼저 bind를 사용하지 않았을 때는 한 방향 바인딩(One-way Binding)이 이루어져요. 즉, 화면에 값은 표시되지만 사용자가 값을 바꿔도 자바스크립트 변수에 변화가 생기지 않는 상태랍니다!

예시 코드 (One-way Binding)

<script>
    let inputValue = "";
</script>

<input type="text" value={inputValue} placeholder="여기에 입력해보세요!" />
<p>입력한 값: {inputValue}</p>

여기서는 사용자가 input에 뭔가를 입력해도 화면에 반영되지 않아요. 왜냐하면 input의 값은 inputValue 변수에 의존하고 있지만, 반대로 inputValue 변수는 사용자의 입력을 받아들이지 않거든요. 이게 한 방향 바인딩(One-way Binding)이예요.

3. Svelte에서 bind를 사용한 경우 - Two-way Binding

하지만 bind를 사용하면 양방향 바인딩(Two-way Binding)이 가능해져요. 즉, 사용자가 input에 값을 입력하면 그 값이 곧바로 inputValue에 저장되고, 저장된 값이 다시 화면에 반영되는 거예요. 이때 화면과 변수의 값이 서로 주고받는 상태라고 이해하면 돼요!

예시 코드 (Two-way Binding)

<script>
    let inputValue = "";
</script>

<input type="text" bind:value={inputValue} placeholder="여기에 입력해보세요!" />
<p>입력한 값: {inputValue}</p>

여기서 bind:value={inputValue}를 사용하면, 사용자가 input에 입력한 값이 실시간으로 inputValue 변수에 저장돼요. 그리고 inputValue가 변할 때마다 화면도 자동으로 업데이트되니까, 두 값이 서로 영향을 주고받는 거예요!!

4. checkbox에서 bind 사용하기

Svelte에서는 checkbox에서도 bind를 사용할 수 있어요. 이 경우, true 또는 false 값을 바인딩할 수 있답니다.

예시 코드 (checkbox 바인딩)

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

<input type="checkbox" bind:checked={isChecked} />
<p>{isChecked ? '체크됨' : '체크되지 않음'}</p>

bind:checked는 체크박스의 상태(true/false)를 자바스크립트 변수에 실시간으로 반영해요. 이게 바로 양방향 바인딩!!! 체크박스를 클릭할 때마다 isChecked 값이 변하고, 그 값이 화면에 바로 나타나는 걸 볼 수 있어요

+ select와 bind 예시

select 태그에 bind:value를 사용하면 선택된 옵션의 값이 변수에 바로 반영되는 예시를 추가로 들어볼게요.

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

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

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

여기서 bind:value는 선택된 옵션의 값을 selectedOption 변수에 저장해줘요. 옵션을 선택할 때마다 selectedOption이 자동으로 변경돼서, 선택된 값을 즉시 사용할 수 있어요.

 

스벨트에서는 엄청 간단하게 양방향으로 값을 바로 반영할 수 있어서 편한 것 같아요 ㅎㅎ