본문 바로가기
웹언어/Svelte

[Svelte강좌] 8강 Logic - each blocks - 오쌤의 니가스터디

OSSAM 2022. 11. 7. 17:58
728x90
반응형

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1. each block(반복 블록) 

- 컴퓨터 프로그램을 이루는 요소 중 대표적인 구문이 바로 조건문과 반복문입니다.

- 기본적으로 HTML은 위에서 말한 두 구문이 없지만, 자바스크립트는 두 구문을 가지고 있습니다.

- 지난 강좌에서는 조건문을 봤고, 이번 강좌에서는 반복문을 보도록 하겠습니다. 

- 반복은 컴퓨터가 제일 잘하는 일입니다. 마크업 영역에서 정말 반복할 일이 많습니다.

- 예를 들어, 쇼핑몰 같은 경우 상품이 정말 많죠? 그리고 넷플릭스도 보면 영상 관련 정보가 정말 많습니다. 

- 하지만 HTML은 조건문과 마찬가지로 반복문을 처리할 수 있는 기능이 없습니다.

- svelte에는 그래서 [ each block]을 사용합니다. 

 

 

 

 

 

1) 기본 each block

- 기본적인 반복 구문부터 확인해보겠습니다.

 

## 문법

{#each datas as data}
	{ data } ...
{/each}

- 위에서는 [ datas ]라고 예시로 작성했는데, 이부분은 상태 값의 복수형 단어라고 생각하시면 됩니다. 그러니까 배열 데이터 전체를 담은 명칭입니다. 

- [ data ]는 단수형 단어라고 생각하면 됩니다. 이부분은 배열 값 중 한 개를 선택했다고 보면 됩니다. 이 영문들은 개발자가 임의적으로 작성해줍니다.

- 무슨 의미인지 아래 코드를 보면서 이해해보도록 하겠습니다.

 

 

 

## 코드보기

- 요일들을 선택 상자(select) 태그에 담아 보도록 하겠습니다.

<script>
	let weekdays = ['일','월','화','수','목','금','토'];
</script>

<!-- select는 반복되지 않으므로 밖에 작성 -->
<select>
	<!-- 반복되는 것은 option태그 -->
	{#each weekdays as weekday}
		<option>{weekday}요일</option>
	{/each}
</select>

- 복수형 단어는 배열을 담는 [ weekdays ]라고 설정했습니다. 

- 단수형 단어는 데이터 한 개 한 개를 의미하는데 한 개이기에 s를 빼고 [ weekday ]라고 설정했습니다. 

- 주석에도 설명을 써놓은 것처럼  <select> 태그는 반복되지 않으므로 [ each block ] 밖에 작성해줍니다. 

-  <option> 태그는 반복되기 때문에 [ each block ] 안에 작성해줍니다. 

 

 

 

## 결과 보기

- 요일들이 반복돼서 잘 들어가 있는 것이 확인됩니다.

 

 

 

 

 

 

 

 

 

 

 

 

2) each block - 인덱스(index) 제공

- [ each block ]을 사용해서 인덱스 번호인 숫자를 이용할 수 있습니다.

- 보통 [ i ]를 사용하면 됩니다. 인덱스 번호는 0번부터 시작됩니다.

 

 

## 문법

{#each datas as data, i}
	{ data } ...
{/each}

- 원래 문법 뒤에 쉼표를 쓴 후 [ i ]를 작성해줍니다.

 

 

 

## 코드 보기

- 이번에는 2022년 야구 정규시즌 순위를 표시해보겠습니다.

<script>
	let teams = ['SSG 랜더스','LG 트윈스','키움 히어로즈','KT 위즈','KIA 타이거즈','NC 다이노스','삼성 라이온즈','롯데 자이언츠','두산 베어스','한화 이글스'];
</script>

<h3>2022 KBO 정규리그순위</h3>
{#each teams as team,i}
	<p>{i + 1}위 : {team}</p>
{/each}

- [ teams ] 배열 값에 야구팀들을 전부 담았습니다.

- 우리는 앞에 순위도 표시할 거라서, 숫자가 필요합니다.

- 그래서 [ each block ] 뒤에 쉼표를 추가하고, [ i ]를 써줍니다. 

-  <p> 태그에 가져올 때는 1위부터 표시되어야 하니 +1을 추가해줍니다.

 

 

 

## 결과 보기

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90
반응형

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3) 객체 데이터 방식으로 반복 처리

- 이번에는 객체 데이터로 반복 처리를 해보겠습니다.

 

 

## 문법

{#each datas as data}
	{ data.id } ...
{/each}

- 위에 쓴 [ data.id ]에서 id는 객체의 속성명을 의미합니다. 

 

 

## 다른 문법

{#each datas as { 속성명, 속성명 } }
	{ data.id } ...
{/each}

- 위의 방식은 모든 데이터 속성을 가져왔다면, 아래 문법은 사용될 것만 가져오는 방식입니다. 

 

 

 

 

## 코드 보기

- 이번에는 방탄소년단 멤버들을 소개한다고 보도록 하겠습니다. 

- 사실 이건 State 상태 값 표시할 때 했었던 적이 있습니다. 

- 이미지 경로가 길긴 하지만, 데이터를 잘 보도록 하겠습니다. 

<script>
	let btss = [
		{
			name: 'RM(김남준)',
			birth: 1994,
			img: 'https://search.pstatic.net/sunny/?src=https%3A%2F%2Fw.namu.la%2Fs%2Fbbd9629ef96c284dfca79eb3b26d49e49ba24b78117abba76b3108cd2b5b8b2860f4d7ceeaef314116b608d5b9d7b080d7e7751e385cc03988992088f8b932b5280a1d1075b1c5bd4759e679166564ca9a95b4ca0bdbdaa219462eacbcbd37be&type=fff264_180'
		},
		{
			name: '진(김석진)',
			birth: 1992,
			img: 'https://search.pstatic.net/sunny/?src=https%3A%2F%2Fw.namu.la%2Fs%2F8152fad7a07738b7d11b8fe1b44b3cd0db34d5fa5c35abee4deae2fd163a4218f003e753532e1edd20a4db12e88382c0f3342d054cba5a0d38ba8bd9be593138ae4b6404caf7373e92540f2688467b825caa89de860dccc282395d440f6f72db&type=fff264_180'
		},
		{
			name: '슈가(민윤기)',
			birth: 1993,
			img: 'https://search.pstatic.net/sunny/?src=https%3A%2F%2Fw.namu.la%2Fs%2Ff4f55ac286d2de6ead4dcf4ab419ca0ba3c44e3badcffe171f727d2653d9dce70d3a2a016307c21a9345fe53c74f099657bc5c96006acc61dc32eecff8e197818ed47d31fbfffc2e17654634345a357017536656b0258d7d1b26ee6b687095b4&type=fff264_180'
		},
		{
			name: '제이홉(정호석)',
			birth: 1994,
			img: 'https://search.pstatic.net/sunny/?src=https%3A%2F%2Fw.namu.la%2Fs%2F67b1d265064ef6fce5ff59b3cf9195e64afade8493633cbf57087c55d40655c08a9481278bf960455ab4ea434bc3c250d57333d6c48743124de4c20d359684728713f1d0b8b063bc510feece8729186146cdbdba6cba15864bc4582aeebce6d5&type=fff264_180'
		},
		{
			name: '지민(박지민)',
			birth: 1995,
			img: 'https://search.pstatic.net/sunny/?src=https%3A%2F%2Fw.namu.la%2Fs%2F379e369eeb01b0fff2ee569d236747e80764442246f1e00bdbc34f658e04847956c3e323a151ebd6f9306aa2214d3f4b5a7ee7142629a1fc727c0ece80642b8d1774fd7f36f2e7fb997cbc7c8f9e135c80e06dd63905e3d4b0de5b1a4a6e143d&type=fff264_180'
		},
		{
			name: '뷔(김태형)',
			birth: 1995,
			img: 'https://search.pstatic.net/sunny/?src=https%3A%2F%2Fw.namu.la%2Fs%2F6e0bcfbe998a033312f0bf704f9880b48048bd960bacafe27ddc7080a9f3149e15ff59e4182c0436b95eed13012fc28c6d0219557cec1f7f9beb2438d64f36072cf50e4e513bb5ed4f3d62aba528f3b06d3edc89d5011d62961f04dc6d60fdf8&type=fff264_180'
		},
		{
			name: '정국(진정국)',
			birth: 1995,
			img: 'https://search.pstatic.net/sunny/?src=https%3A%2F%2Fw.namu.la%2Fs%2F7619aa7dee9b330bef6e184fdb6f8ae4bdaa49915f6cb516266b5b8a7e814e65b39931cb4baad7cffcd61927d0da0e2fa1950e3776e84a339b8c8d3ff943cc25697f4ec55a52b07869b7a2fe04fbe508b4145fc8b26dcb5d437d34e734ebefed&type=fff264_180'
		},
	];
</script>

{#each btss as bts}
<h3><img src="{bts.img}" alt=""></h3>
<h3>이름 : { bts.name }</h3>
<h3>출생 : { bts.birth }</h3>
<hr>
{/each}

- 배열 내부의 데이터를 객체 방식으로 작성해주면, 디테일하게 데이터를 담을 수 있습니다.

- 그래서 각각의 데이터를 호출 시에는 [ 단수형단어.속성명 ]으로 호출해주면 됩니다. 

 

 

 

## 결과 보기

- 방탄소년단 멤버들이 데이터로 잘 반복돼서 표시되는 것이 확인됩니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4) 요소 값에 고유한 key를 설정

- 위와 같은 데이터를 추가한 상태의 항목(속성)에 키(key) 값, 즉 요소의 고윳값을 줄 수도 있습니다.

- 특히, 요소를 추가, 삭제해야 하는 경우에는 데이터가 섞이지 않게 꼭 키값을 설정해줍니다.

- 이유는 키값 없이 추가 작업을 하는 경우에 추가된 값은 무조건 항목의 끝에 위치하게 되는데, 개발자가 이것을 원하지 않을 경우 키값을 주어 위치까지 잘 제어할 수 있게 됩니다.

 

 

## 코드 보기

- 위에서 방탄소년단 데이터를 만든 것에 id라는 속성을 줘서 번호를 주도록 하겠습니다. 

- 버튼을 누르면 멤버가 삭제되게 만들어 보겠습니다. 

(전 세계 아미가 절 욕하는 것 아니겠죠? 오해는 없으셨으면 좋겠습니다. I ♥ BTS )

<script>
	let btss = [
		{
			id: 1,
			name: 'RM(김남준)',
			birth: 1994,
			img: 'https://search.pstatic.net/sunny/?src=https%3A%2F%2Fw.namu.la%2Fs%2Fbbd9629ef96c284dfca79eb3b26d49e49ba24b78117abba76b3108cd2b5b8b2860f4d7ceeaef314116b608d5b9d7b080d7e7751e385cc03988992088f8b932b5280a1d1075b1c5bd4759e679166564ca9a95b4ca0bdbdaa219462eacbcbd37be&type=fff264_180'
		},
		{
			id: 2,
			name: '진(김석진)',
			birth: 1992,
			img: 'https://search.pstatic.net/sunny/?src=https%3A%2F%2Fw.namu.la%2Fs%2F8152fad7a07738b7d11b8fe1b44b3cd0db34d5fa5c35abee4deae2fd163a4218f003e753532e1edd20a4db12e88382c0f3342d054cba5a0d38ba8bd9be593138ae4b6404caf7373e92540f2688467b825caa89de860dccc282395d440f6f72db&type=fff264_180'
		},
		{
			id: 3,
			name: '슈가(민윤기)',
			birth: 1993,
			img: 'https://search.pstatic.net/sunny/?src=https%3A%2F%2Fw.namu.la%2Fs%2Ff4f55ac286d2de6ead4dcf4ab419ca0ba3c44e3badcffe171f727d2653d9dce70d3a2a016307c21a9345fe53c74f099657bc5c96006acc61dc32eecff8e197818ed47d31fbfffc2e17654634345a357017536656b0258d7d1b26ee6b687095b4&type=fff264_180'
		},
		{
			id: 4,
			name: '제이홉(정호석)',
			birth: 1994,
			img: 'https://search.pstatic.net/sunny/?src=https%3A%2F%2Fw.namu.la%2Fs%2F67b1d265064ef6fce5ff59b3cf9195e64afade8493633cbf57087c55d40655c08a9481278bf960455ab4ea434bc3c250d57333d6c48743124de4c20d359684728713f1d0b8b063bc510feece8729186146cdbdba6cba15864bc4582aeebce6d5&type=fff264_180'
		},
		{
			id: 5,
			name: '지민(박지민)',
			birth: 1995,
			img: 'https://search.pstatic.net/sunny/?src=https%3A%2F%2Fw.namu.la%2Fs%2F379e369eeb01b0fff2ee569d236747e80764442246f1e00bdbc34f658e04847956c3e323a151ebd6f9306aa2214d3f4b5a7ee7142629a1fc727c0ece80642b8d1774fd7f36f2e7fb997cbc7c8f9e135c80e06dd63905e3d4b0de5b1a4a6e143d&type=fff264_180'
		},
		{
			id: 6,
			name: '뷔(김태형)',
			birth: 1995,
			img: 'https://search.pstatic.net/sunny/?src=https%3A%2F%2Fw.namu.la%2Fs%2F6e0bcfbe998a033312f0bf704f9880b48048bd960bacafe27ddc7080a9f3149e15ff59e4182c0436b95eed13012fc28c6d0219557cec1f7f9beb2438d64f36072cf50e4e513bb5ed4f3d62aba528f3b06d3edc89d5011d62961f04dc6d60fdf8&type=fff264_180'
		},
		{
			id: 7,
			name: '정국(진정국)',
			birth: 1995,
			img: 'https://search.pstatic.net/sunny/?src=https%3A%2F%2Fw.namu.la%2Fs%2F7619aa7dee9b330bef6e184fdb6f8ae4bdaa49915f6cb516266b5b8a7e814e65b39931cb4baad7cffcd61927d0da0e2fa1950e3776e84a339b8c8d3ff943cc25697f4ec55a52b07869b7a2fe04fbe508b4145fc8b26dcb5d437d34e734ebefed&type=fff264_180'
		},
	];

	function deleteMember(){
		btss = btss.slice(1);
	}
</script>

<button on:click={deleteMember}>멤버삭제</button>

{#each btss as bts}
<h3><img src="{bts.img}" alt=""></h3>
<h3>이름 : { bts.name }</h3>
<h3>출생 : { bts.birth }</h3>
<hr>
{/each}

- 각각의 데이터에 [ id ] 속성을 전부 추가했습니다. 

- 그리고 마크업 부분에  <button> 태그를 추가했습니다.

- 스크립트 부분에 [ deleteMember ]라는 함수를 추가해서 배열 값 중 첫 번째 한 개를 잘라내도록 [ slice ] 메서드를 추가했습니다.

- 그리고 버튼을 클릭할 때 명령이 발생되도록 처리했습니다. 

 

 

 

 

## 결과 보기

- 멤버 삭제 버튼을 눌렀을 때 맨 위의 멤버부터 한 명씩 삭제되는 것이 확인됩니다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90
반응형
저작자표시 비영리 변경금지

'웹언어 > Svelte' 카테고리의 다른 글

[Svelte강좌] 10강 Bindings - textarea, select요소 - 오쌤의 니가스터디  (2) 2023.07.15
[Svelte강좌] 9강 Bindings - input요소 - 오쌤의 니가스터디  (2) 2022.11.08
[Svelte강좌] 7강 Logic - if blocks - 오쌤의 니가스터디  (0) 2022.10.28
[Svelte강좌] 6강 Svelte Props - 오쌤의 니가스터디  (0) 2022.10.21
[Svelte강좌] 5강 Svelte Event - 오쌤의 니가스터디  (0) 2022.10.11

'웹언어/Svelte' Related Articles

티스토리툴바