-
[Svelte] Svelte 기초 - Loop / If-else blocks / Inline Event HandlersFrontend 2020. 6. 21. 17:55
Loops
<script> let people = [ { name: 'juno', hairColor: 'brown', age: 25, id: 1 }, { name: 'mario', hairColor: 'black', age: 45, id: 2 }, { name: 'lily', hairColor: 'pink', age: 35, id: 3 }, ]; </script> <main> {#each people as person (person.id)} <div> <h4>{person.name}</h4> <p>{person.age} years old, {person.hairColor} hair</p> </div> {:else} <p>There are no people to show...</p> {/each} </main>
svelte에서 loop을 돌며 dom 을 그릴 때는 each block을 사용한다.
중간에 else block을 이용해서 만약에 배열에 데이터가 하나도 없을 경우 보여 줄 dom을 결정할 수도 있다.
{#each people as person, index (person.id)} <div>{index + 1} : {person.name}</div> {/each}
이렇게 index를 가져올 수도 있다.
{#each people as { name }, index (person.id)} <div>{index + 1} : {name}</div> {/each}
person이라는 이름 대신 destructuring을 활용할 수도 있다.
If else blocks
<script> let num = 3; </script> {#if num > 20} <p>Greater than 20</p> {:else if num > 5} <p>Greater than 5</p> {:else} <p>Not greater than 5</p> {/if}
if-else 조건에 의해 dom을 조작하고 싶다면 if, else if, else block을 적절히 활용하면 된다.
Inline Event Handlers
<script> let people = [ { name: 'juno', hairColor: 'brown', age: 25, id: 1 }, { name: 'mario', hairColor: 'black', age: 45, id: 2 }, { name: 'lily', hairColor: 'pink', age: 35, id: 3 }, ]; const handleClick = (id) => { // delete the person from people people = people.filter(person => person.id !== id); }; </script> <main> {#each people as person (person.id)} <div> <h4>{person.name}</h4> <p>{person.age} years old, {person.hairColor} hair</p> <button on:click={() => handleClick(person.id)}>delete</button> </div> {/each} </main>
event를 등록하는 일은 React와 거의 동일하다.
다만 문법이 약간 달라서 on:click={} 과 같은 방식을 이용한다.
<script> const handleClick = (event) => { }; </script> <main> <button on:click={handleClick}>delete</button> </main>
이벤트 함수 이름을 직접적으로 넣으면 첫 번째 파라미터로 event 객체가 자동으로 넘어온다.
<script> const handleClick = (event, message) => { console.log(message); // 'parameter' }; </script> <main> <button on:click={(e) => handleClick(e, 'parameter')}>delete</button> </main>
만약에 parameter를 넘겨주고 싶다면 위와 같은 방식으로 넘겨줄 수 있다.
반응형'Frontend' 카테고리의 다른 글
[Svelte] Svelte 기초 - Svelte로 Form 다루기 / Custom Event Dispatch하기 (127) 2020.06.21 [Svelte] Svelte 기초 - Svelte로 Modal 만들기 (Conditional Styles / Event Forwarding / Props / Event Modifiers / Slots) (253) 2020.06.21 [Svelte] Svelte 기초 - Data binding과 Reactive Values (252) 2020.06.02 [Svelte] Svelte 첫 시작 - Setting up a Svelte App (253) 2020.06.01 [Svelte] 스벨트란 무엇인가? Reactive App 개발을 위한 새로운 접근법 (251) 2020.06.01 COMMENT