> For the complete documentation index, see [llms.txt](https://freeseamew.gitbook.io/svelte/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://freeseamew.gitbook.io/svelte/4./bind.md).

# 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\]](https://www.inflearn.com/course/%EB%A7%8C%EB%93%A4%EB%A9%B4%EC%84%9C-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EC%8A%A4%EB%B2%A8%ED%8A%B8)

<div align="left"><img src="/files/-MGqwZuQK1aEaE5Bp21i" alt="만들면서 배우는 svelte"></div>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://freeseamew.gitbook.io/svelte/4./bind.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.