bind

1) bind 기본

UI로 사용되는 다양한 폼(text box, select box, combo box, check box 등)과 스크립트로 정의된 state값이 서로 유기적으로 함께 작동 해야하는 경우가 많습니다. 이렇게 state와 폼이 연동되는 것을 binding이라고 합니다.

기본 사용법은 바인딩 시키고자 하는 폼요소에 bind:value="{스테이트이름}" 이런 식으로 사용하시면 됩니다.

아래 예제를 보시면 이해가 빠를 것입니다.

<script>
	let textValue = ''
	
	function clearText() {
		textValue = ''
	}
	
</script>

<input type="text" bind:value="{textValue}" />
<p> 입력값: {textValue} </p>
<button on:click={clearText}>지우기</button>

bind를 통해서 input box와 textValue 값이 동기화 되었습니다. 그래서 input 박스에 값을 입력하면 textValue가 변경되면서 {textValue}에 값이 변경됩니다. 또한 clearText 함수를 호출하면 textValue의 값이 초기화 되고 input 박스도 함께 초기화 되는 것을 볼 수 있을 것입니다. 서로 영향을 주고 받는 양방향 바인딩 상태가 적용된 것을 볼 수 있습니다.

2) checkbox, radio, select

대부분의 폼은 bind:value 로 사용이 가능하지만, checkbox, radio 는 사용법이 조금 다릅니다.

• checkbox

<script>
	let boxChecked = false
</script>

<label>
	체크 박스 예제
	<input type="checkbox" bind:checked="{boxChecked}">
</label>

<button disabled={boxChecked} >전송</button>

• checkbox group

<script>
	let numbers = [
		'own',
		'two',
		'three'
	]
	
	let getNumbers = []
</script>

{#each numbers as number}
	<label>
		<input type="checkbox" bind:group={getNumbers} value={number} /> 
		{number}
	</label>
{/each}

{getNumbers}

• multi selet

<script>
	let numbers = [
		'own',
		'two',
		'three'
	]
	
	let getNumbers = []
</script>

<select multiple bind:value={getNumbers}>
	{#each numbers as number}
		<option value={number}>
			{number}
		</option>
	{/each}
</select>

<p>{getNumbers}</p>

• radio

<script>
	let selected = 0
</script>

<h2>Size</h2>

<label>
	<input type=radio bind:group={selected} value={1}>
	One scoop
</label>

<label>
	<input type=radio bind:group={selected} value={2}>
	Two scoops
</label>

<label>
	<input type=radio bind:group={selected} value={3}>
	Three scoops
</label>

<p>선택된 라디오 버튼: {selected} 번째</p>

3) 컴포넌트에서의 사용

이미 정의된 input form말고 사용자 정의 컴포넌트에서도 이 bind는 사용이 가능합니다.

• App.svelte

<script>
	import CountComp from './countComp.svelte'
	
	let viewValue = 0
</script>

<h2>{viewValue}</h2>

<CountComp bind:count={viewValue} />

• countComp.svelte

<script>
	export let count
	
	function add() {
		count += 1
	}
</script>

<button on:click={add}>ADD</button>

[만들면서 배우는 Svelte]

만들면서 배우는 svelte