Svelte 논리블럭, 반복블럭 사용하기

SPA 프로젝트에서는 특히 더 상태값에 따라 보여주고 싶은 화면이 다를때가 많다. 

 

그 예를 한번 간단히 살펴보면

 

<script>
	let statusFlag = false
	
	const handleTrue = () => {
		statusFlag = true;
	}
	
	const handleFalse = () => {
		statusFlag = false;
	}
	
</script>

<button on:click={handleTrue}>
	True
</button>
<button on:click={handleFalse}>
	False
</button>

{#if statusFlag === true}               // # 으로 열어주고
<div>
	True 입니다.
</div>
{:else}
<div>
	False 입니다.
</div>
{/if}                                  // : 으로 닫아주고

 

이런 식으로 특정 상태값에 따라 UI 컨트롤을 해줄 수 있고

 

단골로 사용하는 반복 블럭을 사용해보면

 

<script>
let datas = [
	{
		id:0,
		name: 'Jeong'
	},
		{
		id:1,
		name: 'Sang'
	},
		{
		id:2,
		name: 'Hoon'
	}
]
	
</script>


{#each datas as data}      // 똑같이 # 으로 열고
<div>
	{data.name}
</div>
{/each}                    // / 으로 닫고  뭔가 for of 문법같은