[Svelte] HTML에서의 조건문과 루프 방법 정리

 

 

 

 

 

 

🌈 Svelte HTML의 조건문과 루프 작업

Svelte.js - 완벽 가이드의 [섹션 3:: 조건문 및 루프 작업]과 [섹션 4:: 반응성(Reactivity)들여다보기] 를 수강한 후에 정리한 내용이다.

 

 

 

 

1️⃣ if

스벨트의 HTML에 if 문은 중괄호와 #으로 표현할 수 있다.

또한 if문을 종료하기(/if) 전에 else문을 작성할 수 있으며 else 앞에 콜론을 붙여 사용할 수 있다.

<script>
</script>

...

{#if formState === 'done'}
    <ContactCard 
        userName={name} 
        jobTitle={title} 
        {description} 
        userImage={image} />
{:else if formState === 'invalid'}
	<p>Invalid input.</p>
{:else}
	<p>Please Enter some data and hit the button!</p>
{/if}

 

 

 

 

2️⃣ each

스벨트의 HTML에서 반복문을 사용하기 위해서는 each문을 사용하며 중괄호와 #으로 표현할 수 있다.

 

주목해야 할 점은 스크립트단에서 객체에 push하는 것이 아닌 값을 재할당 하는 것인데, 스벨트에서는 원시타입의 변화만 인식할 수 있기 때문에 push와 pop을 하였을 때 값의 변화를 인식할 수 없다. 따라서 참조타입인 객체와 배열 같은 경우에는 값을 재할당해야 한다는 점이다.

 

(참고 : [JS]자바스크립트의 원시 타입과 참조 타입)

 

아래 코드는 스크립트단에서 선언한 createdContacts 객체의 값을 반복하는 each문이다.

<script>
    let createdContacts = [];
    createdContacts = [
    	...createdContacts, 
        {
            name : name,
            jobTitle: title,
            imageUrl: image,
            desc: description
        }
    ];
</script>

{#each createdContacts as contact}
<ContactCard 
    userName={contact.name} 
    jobTitle={contact.jobTitle} 
    description={contact.desc}
    userImage={contact.imageUrl} />
{/each}

 

또한, each문은 객체에 alias을 붙여 사용할 수 있고, 추가적으로 인덱스와 고유의 id 값을 지정해 줄 수 있다.

 

◾ each의 인덱스와 each-else문

each문에서 alias 뒤에 오는 것은 인덱스이다. 인덱스는 i, idx 등 원하는 단어를 입력할 수 있다.

또한, each문에도 else를 사용할 수 있는데, 반복 대상 객체가 비어있을 때 else로 분기하게 된다.

{#each createdContacts as contact, i}
<h2># {i+1}</h2>
<ContactCard 
	userName={contact.name} 
	jobTitle={contact.jobTitle} 
	description={contact.desc}
	userImage={contact.imageUrl} />
{:else}
	<p>Please start adding some contacts, We found None!</p>
{/each}

 

◾ each의 고유 아이디

each문에서 인덱스 뒤에 괄호를 사용함으로써 반복문을 통해 생성된 DOM 객체에 아이디를 지정할 수 있다.

{#each createdContacts as contact, i (contact.id)}
<h2># {i+1}</h2>
<ContactCard 
	userName={contact.name} 
	jobTitle={contact.jobTitle} 
	description={contact.desc}
	userImage={contact.imageUrl} />
{:else}
	<p>Please start adding some contacts, We found None!</p>
{/each}

 

 

 

 

3️⃣ 이벤트 수식어(Modifier)

이벤트 수식어란 HTML 태그에서 스벨트의 이벤트를 지정하였을 때 추가적인 옵션을 지정하는 것으로

아래 코드와 같이 이벤트(on:click)에 버티컬 바(|) 와 수식어를 붙여 씀으로써 사용할 수 있다.

<button on:click|preventDefault={addContact} type="submit">Add Contact Card</button>

 

 

 

 

4️⃣ HTML 태그에서 인라인 함수 사용

스크립트단에 작성한 함수를 바인드 하는 것이 아니라 HTML 태그 내에 직접 함수를 작성할 수도 있다.

<button on:click={event => createdContacts = createdContacts.slice(1)}>
	Delete First
</button>