[Svelte강좌] 9강 Bindings - input요소 - 오쌤의 니가스터디

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1. 바인딩(Binding)이란?

---

- 바인딩은 상태 값과 그 값을 제어하는 요소와의 결합을 의미합니다.

- 보통 데이터를 입력하는 다양한 폼(input, select, textarea 등)과 함께 사용됩니다.

- svelte는 양방향 바인딩을 이용해서 동시에 값이 변경되게 처리됩니다.

- 지난 [ 7강 if block ]에서 입력 상자에 값을 입력하면 반환되는 것을 [ keyup ] 이벤트를 통해 강제로 발생시켰는데, 사실 그렇게 작업할 필요가 없이 svelte는 바인딩이 잘 되어 있습니다. 

- 바인딩은 다른 요소와 컴포넌트에도 가능하지만 이번 강좌에서는 form관련 바인딩만 보도록 하겠습니다. 

 

 

 

## 문법

<태그요소 bind:태그속성={상태값}>

- 보통 위의 형태로 작성한다고 보면 됩니다.

 

 

 

 

 

 

 

 

1) input text value 바인딩

- 입력상자에 입력한 값이 p태그에 바로 반환되게 처리해보겠습니다.

 

## 코드 보기

<script>
	let name = '';
</script>

<input type="text" bind:value={name} placeholder="이름을 입력하세요.">
<p>안녕! {name || '낯선 사람'}!</p>

-  <input> 태그에  bind:속성명={ 상태 값} 으로 잘 연결해줬습니다. 

- 처음부터 값이 비어있는 것을 방지하기 위해 논리합 연산자( || )로 name이 없는 경우 낯선 사람으로 인식하게 처리했습니다.

 

 

 

## 결과 보기

- 처음엔 [낯선 사람]으로 되어 있다가 이름을 바꾸면 실시간으로 데이터가 변경되는 것을 확인할 수 있습니다. 

 

 

 

 

 

 

 

 

 

 

 

 

2) input number/range value 바인딩

- 이번에는 숫자를 지정하는 number타입과 범위가 결정되는 range타입으로 데이터가 바인딩되는 것을 보겠습니다.

 

## 코드 보기

<script>
	let a = 1;
	let b = 2;
</script>

<label>
	<input type=number bind:value={a} min=0 max=10>
	<input type=range bind:value={a} min=0 max=10>
</label>

<label>
	<input type=number bind:value={b} min=0 max=10>
	<input type=range bind:value={b} min=0 max=10>
</label>

<p>{a} + {b} = {a + b}</p>

- 이번에는 변수를 2개 선언해서 상태 값을 2개를 바인딩해보겠습니다.

-  <input> 태그들의  value 속성에 bind 해보겠습니다.

 

 

 

## 결과 보기

- number타입의 숫자를 바꿔도 버튼을 눌러도 데이터가 실시간으로 잘 변경되는 것이 확인됩니다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90

반응형

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3) input checkbox checked 바인딩

- 이번에는 체크 상황에 따라 바인딩 처리를 해보도록 하겠습니다.

- [ bind:checked ]를 통해 상태 값에 바인딩 처리가 가능합니다.

 

 

## 코드 보기

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

<label>
	<input type="checkbox" bind:checked={chk}>
	약관 동의
</label>

{#if chk}
	<p>당신은 약관에 동의했습니다.<br>이제 구독이 가능합니다.</p>
{:else}
	<p>당신은 약관에 동의하지 않았습니다.<br>아직 구독이 불가능합니다.</p>
{/if}

<button disabled={!chk}>
	구독
</button>

- [ chk ] 변수에는  true/false 가 담기도록 설정하고, 초기값은 false로 지정해줍니다. 

- 그리고  <input type="checkbox"> 에 [ bind:checked={chk} ]로 [ chk ] 를 상태 값으로 지정해줍니다.

- [ if block ]을 통해서 체크상태에 따라 반환받을  <p> 태그를 따로 지정해줍니다.

-  <button> 태그의  disabled 상태 역시 [ chk ] 상태값으로 지정해줍니다. 대신 부정 연산자를 사용하여  false 일 때 사용 불가능하게 처리해줍니다. 

 

 

 

 

## 결과 보기

- 약관 동의 옆 체크박스를 체크하면 구독 버튼이 클릭되고, 미체크되면 구독 버튼이 클릭되지 않는 것이 잘 확인됩니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4) input checkbox/radio 그룹 바인딩

- 보통 체크박스나 라디오 버튼은 체크되는 요소가 그룹으로 처리됩니다.

- 특히 라디오버튼 같은 경우는  name 속성을 통해 하나의 그룹으로 체크됩니다.

- 이때 svelte에서 사용되는 바인딩이 [ bind:group={상태값} ]입니다.

- 이 바인딩으로 같이 사용되는 폼들의 상태 값을 공유하게 됩니다.

- 아래 코드로 더 자세히 공부해보도록 하겠습니다. 

 

 

## 코드 보기

- 커피 사이즈를 선택하는 라디오 버튼을 만들어 보겠습니다.

<script>
	let choiceSize = 0;
	let sizes = ['Tall','Grande','Venti'];
</script>

<h3>사이즈 선택</h3>
{#each sizes as size, i}
	<label>
		<input type="radio" bind:group={choiceSize} value={i}>
		{ size }
	</label>
{/each}

<p>고객님은 {sizes[choiceSize]}를 선택하셨습니다.</p>

- 일단 [ choiceSize ]는 라디오 버튼이 그룹으로 묶일 상태 값입니다. 초기값은 0으로 줬는데 추후 반복을 통해 인덱스 번호로  value 속성값을 처리할 거라서 그렇습니다.

- [ sizes ] 는  each block 으로 반복할 거라 배열로 이름을 지정해줬습니다. 

-  each block  안에 라디오버튼들을 반복해줍니다. 이때 같은 그룹화로 상태 값을 바인딩할 거라 [ bind:group={choiceSize} ] 입을 처리해줍니다.

- 그리고 하단  <p> 태그에 선택한 사이즈를 상태 값으로 출력해줍니다. 

 

 

 

## 결과 보기

- 초기값을 0으로 지정했기 때문에 Tall로 처음에 잘 선택됩니다.

- 라디오 버튼 체크에 따라 상태 값이 자동으로 변경되는 것이 잘 확인됩니다.