[Svelte] Svelte 기초 - Loop / If-else blocks / Inline Event Handlers

 

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를 넘겨주고 싶다면 위와 같은 방식으로 넘겨줄 수 있다.