svelte 번역 - 7 - Template Syntax / Component directives

on:eventname

Svelte 컴포넌트는 DOM 이벤트와 동일하게 컴포넌트에서도 이벤트를 발생시키고 수신할 수 있습니다. 이벤트는 createEventDispatcher 함수를 사용하여 프로그램적으로 디스패치할 수 있으며, DOM 이벤트를 전달(forwarding)하는 방식으로도 가능합니다.

<script>
    import { createEventDispatcher } from 'svelte';

    const dispatch = createEventDispatcher();
</script>

<!-- 프로그램적으로 이벤트 디스패치 -->
<button on:click={() => dispatch('hello')}> one </button>

<!-- 선언적으로 이벤트 전달 -->
<button on:click> two </button>

컴포넌트 이벤트 수신은 DOM 이벤트와 동일하게 처리됩니다.

<SomeComponent on:whatever={handler} />

on: 지시어가 값 없이 사용되면 이벤트가 전달되며, 소비자가 해당 이벤트를 수신할 수 있게 됩니다.

<SomeComponent on:whatever />

---

--style-props

컴포넌트에 CSS 사용자 정의 속성을 사용해 스타일을 props로 전달할 수 있습니다. Svelte는 이를 위해 래퍼 요소를 추가하는 문법적 설탕을 제공합니다.

예를 들어:

<Slider bind:value min={0} --rail-color="black" --track-color="rgb(0, 0, 255)" />

위 코드는 다음과 같이 변환됩니다:

<div style="display: contents; --rail-color: black; --track-color: rgb(0, 0, 255)">
    <Slider bind:value min={0} max={100} />
</div>

주의할 점은, 이렇게 추가된 <div> 요소가 CSS 구조에 영향을 미칠 수 있다는 것입니다. SVG 네임스페이스에서 이 문법은 <g> 태그로 변환됩니다.

<g style="--rail-color: black; --track-color: rgb(0, 0, 255)">
    <Slider bind:value min={0} max={100} />
</g>

컴포넌트에서 쉽게 테마를 설정할 수 있도록 Svelte의 CSS 변수를 사용할 수 있습니다.

<style>
    .potato-slider-rail {
        background-color: var(--rail-color, var(--theme-color, 'purple'));
    }
</style>

전역 테마 색상을 설정하거나 컴포넌트 소비자 수준에서 이를 재정의할 수 있습니다.

/* global.css */
html {
    --theme-color: black;
}

<Slider --rail-color="goldenrod" />

---

bind:property

컴포넌트의 속성에도 bind: 지시어를 사용하여 바인딩할 수 있습니다. 이를 통해 컴포넌트 내부에서 속성 값이 변경될 때, 상위 컴포넌트에 그 값이 전달됩니다.

<Keypad bind:value={pin} />

기본적으로 Svelte의 속성은 반응성을 가지지만, 바인딩은 기본적으로 하향식(상위 → 하위)으로만 흐릅니다. bind:property를 사용하면 하위 컴포넌트의 값 변경이 상위로 흐르게 할 수 있습니다.

---

bind:this

컴포넌트 인스턴스에도 bind:this를 사용하여 컴포넌트와 프로그램적으로 상호작용할 수 있습니다. 이를 통해 컴포넌트의 메서드를 호출하거나 상태를 조작할 수 있습니다.

<ShoppingCart bind:this={cart} />

<button on:click={() => cart.empty()}> 장바구니 비우기 </button>

참고로, 렌더링 시점에 cart는 아직 정의되지 않았기 때문에 {cart.empty}와 같은 방식으로 바로 호출하면 오류가 발생할 수 있습니다.