[Svelte강좌] 11강 Bindings - Each Block - 오쌤의 니가스터디

 

 

 

 

 

 

 

1. Each Block 바인딩(Binding)이란?

---

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

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

- 하지만 다른 요소들에도 사용할 수 있습니다. 

- 이번에는 each block 관련으로 보고자 합니다.

- each block은 반복 로직에서 사용합니다. 그러다 보니 다양한 작업들을 합니다. 

- 지난 강좌에서 select태그의 옵션 태그때문에 사용은 했었습니다.

- 워낙 each block은 많이 사용하기 때문에 다시 정리하고 넘어가도록 하겠습니다. 

- 이번 강좌에서는 간단한 버킷리스트를 제작해보도록 하겠습니다. 

 

버킷리스트 완성 예제

 

 

 

 

 

 

 

 

1) 마크업 구조 확인하기

- svelte의 바인딩기능이 아직 들어가지 않은 상태의 마크업 구조를 보도록 하겠습니다. 

## 코드 보기

<h1>Bucket List</h1>
<!-- 반복될 리스트 구역 -->
<div>
    <input type="checkbox" />
    <input type="text" placeholder="당신의 버킷리스트는 뭔가요?" value="웹프론트엔드개발자되기" style="width: 250px" />
</div>
<!-- 반복될 리스트 구역 -->
<p>남은 버킷리스트 : 1</p>
<button>새로운 버킷 추가</button>
<button>성공한 버킷 제거</button>

- <h1>태그요소에는 타이틀을 작성했습니다.

- <div>태그요소는 배열 데이터만큼 반복할 겁니다.

- 반복하기 전에 기본 구조를 보기 위해 한 개만 작성하고 시작하겠습니다.

- <input>태그요소는 checkbox타입과 text타입으로 나눠서 작업하겠습니다.

- checkbox타입을 체크하면 버킷리스트를 이룬 것으로 보도록 하겠습니다.

- text타입의 value값은 추후 배열 데이터가 들어 갑니다.

- p태그요소는 남은 버킷리스트의 개수를 반환하도록 하겠습니다.

- 현재는 숫자 1을 작성해놨는데, 숫자 1부분을 표현식으로 구해보도록 하겠습니다.

- button태그요소도 2개를 추가하는데 첫번째 버튼은 새로운 버킷을 추가하겠습니다.

- 두번째 버튼은 성공한 버킷리스트는 제거해보도록 하겠습니다. 

 

 

## 결과 보기

- 마크업 구조가 잘 나오는 것을 확인할 수 있습니다. 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

2) 배열 데이터 추가하기

- 이번에는 배열 데이터를 추가해보도록 하겠습니다. 

- 배열 데이터를 script에 작성한 후에 마크업 부분에 Each Block을 사용해서 div태그요소가 반복되도록 처리하겠습니다.

- 배열 데이터 개수만큼 버킷리스트를 추가해보도록 하겠습니다. 

 

## 코드 보기

<script>
    let buckets = [
		{ chk: false, text: '웹프론트엔드개발자되기' },
		{ chk: false, text: '유럽여행가기' },
		{ chk: false, text: '영국가서 손흥민 축구보기' }
	];
</script>

<h1>Bucket List</h1>
{#each buckets as bucket}
    <div>
        <input type="checkbox" bind:checked={bucket.chk} />
        <input type="text" placeholder="당신의 버킷리스트는 뭔가요?" style="width: 250px" bind:value={bucket.text} disabled={bucket.chk} />
    </div>
{/each}
<p>남은 버킷리스트 : 1</p>
<button>새로운 버킷 추가</button>
<button>성공한 버킷 제거</button>

- buckets라는 배열데이터를 만들었습니다.

- 배열데이터 한 개, 한 개는 객체방식으로 데이터를 처리해줍니다.

- <h1>태그요소 아래 Each Block을 처리해서 버킷리스트를 배열데이터 개수만큼 반복합니다.

- <input>태그요소 중 checkbox타입에는 bind:checked={bucket.chk}를 바인딩 해줍니다.

- 그 중 chk속성값이 true면 체크되고, false면 체크되지 않도록 처리합니다.

- <input>태그요소 중 text타입에는 bind:value={bucket.text}를 사용해서 value값에 text속성의 문자열이 들어가게 처리해줍니다.

- 그리고 chk속성값이 true면 사용이 불가능하도록 disabled속성을 처리해줍니다. 

 

 

## 결과 보기

- 그럼 데이터들이 반복돼서 잘 처리되는 것이 확인되죠?

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

3) 남은 버킷리스트 개수 구하기

- 남은 버킷리스트에는 임의적으로 숫자 1을 작성해놨습니다. 

- 체크되지 않은 체크박스의 개수에 따라 매번 다르게 표시되도록 하겠습니다. 

 

## 코드 보기

<script>
    let buckets = [
		{ chk: false, text: '웹프론트엔드개발자되기' },
		{ chk: false, text: '유럽여행가기' },
		{ chk: false, text: '영국가서 손흥민 축구보기' }
	];
    $: remaining = buckets.filter(bucket => !bucket.chk).length;
</script>

<h1>Bucket List</h1>
{#each buckets as bucket}
    <div>
        <input type="checkbox" bind:checked={bucket.chk} />
        <input type="text" placeholder="당신의 버킷리스트는 뭔가요?" style="width: 250px" bind:value={bucket.text} disabled={bucket.chk} />
    </div>
{/each}
<p>남은 버킷리스트 : {remaining}</p>
<button>새로운 버킷 추가</button>
<button>성공한 버킷 제거</button>

- $: remaining은 반응성 코드로 상태 값에 따라 반응하도록 처리했습니다.

- 그럼 buckets의 데이터에 따라 반응해서 개수가 유동적으로 변경됩니다.

- remaining은 chk속성 값이 false인 것의 개수를 담도록 처리했습니다.

- 자바스크립트 filter 메서드는 콜백 함수에서 제공하는 테스트를 통과하는 요소로 채워진 새 배열을 만듭니다.

- 마크업 부분의 p태그요소에 remaining이 구현되도록 표현식으로 처리합니다.

 

** 자바스크립트 ES5~6에 새로 나온 배열 메서드들은 모두 습득하는 것이 프론트엔드 언어들을 배울 때 좋습니다. 

https://ossam5.tistory.com/163

[ES6강좌] 7강 Array객체의 메서드 추가 - 오쌤의 니가스터디

 

 

## 결과 보기

- 초기 실행 시 하나도 체크가 되어있지 않으므로 남은 버컷리스트는 3개로 처리가 됩니다.

- 버킷리스트 앞의 체크박스를 체크하면 남은 버킷리스트의 숫자도 자동으로 주는 것이 보이죠?

 

 

 

 

 

---

 

 

 

 

 

 

4) 이벤트 함수 처리

- 버킷리스트의 마지막으로 버튼에 이벤트를 처리해보도록 하겠습니다.

- 첫 번째 버튼을 클릭하면 새로운 버킷리스트를 추가할 수 있게 처리를 하겠습니다.

- 두 번째 버튼을 클릭하면 체크된 버킷리스트를 제거해보도록 하겠습니다. 

<script>
    let buckets = [
		{ chk: false, text: '웹프론트엔드개발자되기' },
		{ chk: false, text: '유럽여행가기' },
		{ chk: false, text: '영국가서 손흥민 축구보기' }
	];
    $: remaining = buckets.filter(bucket => !bucket.chk).length;

    const onAdd = () => {
        buckets = buckets.concat({ chk: false, text: '' });
    }
    const onRemove = () => {
        buckets = buckets.filter(bucket => !bucket.chk);
    }
</script>
<h1>Bucket List</h1>
{#each buckets as bucket}
	<div>
		<input type="checkbox" bind:checked={bucket.chk} />

		<input type="text" placeholder="당신의 버킷리스트는 뭔가요?" bind:value={bucket.text} disabled={bucket.chk} style="width: 250px" />
	</div>
{/each}
<p>남은 버킷리스트 : {remaining}</p>
<button on:click={onAdd}>새로운 버킷 추가</button>
<button on:click={onRemove}>성공한 버킷 제거</button>

- script부분에 onAdd라는 함수와 onRemove라는 함수를 추가했습니다. 

- onAdd함수는 새로운 버킷리스트를 추가하는 코드를 처리했습니다. 

- 기존 buckets에 새로운 배열 데이터를 연결해주는 concat메서드를 처리했습니다. 

- 이 때 chk속성은 처음부터 체크되진 않을 테니 false로 처리했고, text속성은 빈문자열로 처리해서 사용자가 값을 입력하면 변경되도록 처리했습니다. 

- onRemove함수는 filter메서드를 통해 체크되지 않은 것들만 반환되도록 처리했습니다. 

- 체크된 것은 이미 버킷리스트를 이룬 것으로 보고 삭제하기 위해서입니다.

 

 

## 결과 보기

- 새로운 버킷 추가버튼을 누르면 버킷리스트가 추가됩니다.

- 입력상자에 값을 입력하면 변경됩니다.

- 버킷리스트를 체크한 후 성공한 버킷 제거버튼을 누르면 체크된 것이 모두 지워집니다.