나를 기쁘게 하는 7가지 날렵한 기능

Svelte를 처음 배울 때 입가에 미소를 짓게 만드는 작은 것들이 많이 있습니다. 작은 단축키 중 일부는 매우 우아하여 더 깨끗하고 간결한 코드로 훨씬 쉽게 작업을 수행할 수 있습니다. 제가 좋아하는 기능 7가지를 모아서 데모로 YouTube용 동영상으로 녹화했습니다.

1. 바인드:속성

Svelte에서는 DOM 요소의 속성을 로컬 변수에 매우 쉽게 바인딩할 수 있습니다. 예를 들어 변수를 입력 값에 바인딩할 수 있습니다.

<script>
let name = '';
</script>

<input bind:value={name}/>

2. 지시문 바로가기

Svelte에는 지시문을 사용하고 소품을 훨씬 더 간결하게 만드는 멋진 단축키가 많이 있습니다. 속성 이름과 변수 이름이 같으면 다음과 같이 작성할 수 있습니다.

<script>
let value = '';
let active = false;
</script>

<input bind:value class:active/>

Svelte를 사용하는 것이 정말 즐거운 이유는 이와 같은 바로가기 때문입니다.

3. 범위가 지정된 CSS

Svelte 구성 요소에서 <style> 블록 내부의 모든 CSS는 해당 구성 요소로 범위가 지정됩니다. 즉, 스타일링을 위해 클래스나 ID를 추가할 필요가 없는 경우가 많습니다. 페이지의 나머지 부분의 CSS를 엉망으로 만들 위험 없이 종종 태그 이름을 스타일 지정에 사용할 수 있습니다.

<style>
  /* No class needed! */
  button {
    font-size: 200%;
    background: red;
  }
</style>

<button>Click me</button>

4. DOM 이벤트 수정자

양식에 제출 핸들러를 추가하거나 링크에 클릭 핸들러를 추가하고 페이지를 새로 고치지 않고 이벤트를 처리하려면 핸들러 함수에서 event.preventDefault()를 호출해야 합니다. Svelte는 "수정자"를 사용하여 이것을 매우 쉽게 만듭니다.

<script>
function handleSubmit() {
  // don't need to call preventDefault in here anymore!
}
</script>

<form on:submit|preventDefault={handleSubmit}>
  <input type="submit"/>
</form>

5. 루프 "else" 절

특별한 "nothing here"메시지를 표시할 수 있도록 배열이 비어 있는지 확인하기 위해 if 명령문을 몇 번이나 작성하셨습니까? Svelte는 {#each} 블록에 "else"절을 제공하여 이를 매우 쉽게 만듭니다.

<script>
let results = [];
</script>

{#each results as result}
    <p>{result}</p>
{:else}
    <p>Sorry, no results found!</p>
{/each}

6. 전환

페이지에서 무언가가 나타났다가 사라질 때마다 CSS 전환을 사용하여 상태 변경이 더 자연스럽게 느껴지도록 약간의 애니메이션을 갖는 것이 정말 좋습니다. 일반적으로 이 작업을 수행하려면 CSS와 JavaScript를 많이 작성해야 하지만 Svelte를 사용하면 매우 간단합니다. 원하는 효과를 가져오고 요소에 transition: 지시문을 사용하기만 하면 요소가 나타나거나 사라질 때마다 전환이 재생됩니다.

<script>
import { fade } from 'svelte/transition';
</script>

<div transition:fade>
  This will fade in and out.
</div>

7. 슬롯 소품과 let:variable 지시문

내가 절대적으로 좋아하는 Svelte 기능은 구성 요소에서 하위 요소로 데이터를 전달하는 기능입니다. React에서 이것을 달성하는 일반적인 방법은 함수 자식 또는 렌더링 소품을 사용하는 것이며, 이는 종종 코드를 읽고 이해하기 어렵게 만듭니다.

Svelte는 이 기능을 템플릿 구문에 바로 구축합니다. 부모 구성 요소에 <slot/> 요소를 추가하고 여기에 소품을 전달합니다. 그런 다음 let:prop 지시문을 사용하여 데이터를 수신합니다.

<!-- ColorManager.svelte -->
<script>
let colors = ['red', 'green', 'blue'];
</script>

<slot {colors} />

<!-- Colors.svelte -->
<script>
import ColorManager from './ColorManager.svelte';
</script>

<ColorManager let:colors>
  <ul>
    {#each colors as color}
      <li>{color}</li>
    {/each}
  </ul>
</ColorManager>

이렇게 하면 데이터 가져오기 및 관리를 전적으로 담당하는 구성 요소를 쉽게 작성할 수 있습니다. 이를 통해 상태 논리에서 렌더링 논리를 분리하고 훨씬 더 간단한 코드로 끝낼 수 있습니다.

결론

Svelte에는 웹 구성 요소를 그 어느 때보다 간단하게 만드는 정말 멋진 기능과 구문이 많이 있습니다. 나는 여기에 내가 좋아하는 몇 가지를 요약했습니다. 더 자세히 알아보려면 The Joy of Svelte 을 확인하십시오.