[Svelte] 조건문과 반복문

안녕하세요. J4J입니다.

 

이번 포스팅은 조건문과 반복문에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

조건문과 반복문

 

react, vue 등에도 각자 조건문과 반복문을 사용하는 방법이 있듯이 svelte에서도 svelte만의 조건문과 반복문 사용 방법이 있습니다.

 

조건문은 if-else문, 반복문은 each-else문을 활용하여 만들어줄 수 있습니다.

 

조건문과 반복문은 개발을 하기 위해 어떤 곳에서든 사용되는 것이기 때문에 설명 필요 없이 svelte에서 사용되는 예시 코드를 보여드리겠습니다.

 

 

반응형

 

 

<script>
	let array = ['first', 'second', 'third']
	let toggle1 = false;
	let toggle2 = false;
</script>

<main>
	<div class='box'>
		<button on:click={() => toggle1 = !toggle1}>Toggle1</button>
		<button on:click={() => toggle2 = !toggle2}>Toggle2</button>
	</div>

	<!-- 조건문 -->
	<div class='box'>
		{#if toggle1 === true}
			<h2>toggle1 is true</h2>
		{:else if toggle2}
			<h2>toggle1 is false and toggle2 is true</h2>
		{:else}
			<h2>toggle1 is false and toggle2 is false</h2>
		{/if}
	</div>

	<!-- 반복문 -->
	<div class='box'>
		<h3>Array...</h3>
		{#each array as data, index} <!-- #each {배열} as {요소}, {인덱스} -->
			 <p>{index}: {data}</p>
		{:else}
			 <h4>Array is empty...</h4>
		{/each}
	</div>
</main>

<style>
	.box {
		border-bottom: 2px solid orange;
	}
</style>

 

 

 

기존에 react, vue등에서 사용되는 것과 간단하게 비교하면 조건문은 if-else를 활용하여 동일하게 사용된다고 볼 수 있습니다.

 

 

728x90

 

 

하지만 반복문 같은 경우에 차이가 있습니다.

 

배열에 있는 요소들을 반복하여 화면에 뿌려주는 것은 동일하지만 배열이 비어있는 경우(=배열 길이가 0)에 조금 더 간편하게 else문을 활용하여 표현해줄 수 있습니다.

 

 

 

 

 

 

이상으로 조건문과 반복문에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.