Svelte) Component directives

 

- on:eventname

: 컴포넌트는 createEventDispatcher를 사용하거나 DOM 이벤트를 전달함으로써 이벤트를 발생시킬 수 있습니다.

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

	const dispatch = createEventDispatcher();
</script>

<!-- programmatic dispatching -->
<button on:click={() => dispatch('hello')}> one </button>

<!-- declarative event forwarding -->
<button on:click> two </button>

 

: 컴포넌트 이벤트를 수신하는 방법은 DOM 이벤트를 수신하는 것과 동일합니다:

<SomeComponent on:whatever={handler} />

 

: DOM 이벤트와 마찬가지로, 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>

* 이는 추가적인 요소이므로 CSS 구조가 이를 잘못 대상으로 삼을 수 있습니다. 이 기능을 사용할 때 이 추가된 래퍼 요소를 유념해야 합니다.

: 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

: 컴포넌트 props에는 요소와 같은 구문을 사용하여 바인딩할 수 있습니다.

<Keypad bind:value={pin} />

 

: Svelte props는 바인딩 없이도 반응적이지만, 기본적으로 이 반응성은 컴포넌트 내부로만 흐릅니다. bind:property를 사용하면 컴포넌트 내부에서 속성의 변경 사항이 컴포넌트 외부로 다시 흐를 수 있습니다.

 

- bind:this

: 컴포넌트는 또한 bind:this를 지원하여 프로그래밍 방식으로 컴포넌트 인스턴스와 상호 작용할 수 있습니다.

<ShoppingCart bind:this={cart} />

<button on:click={() => cart.empty()}> Empty shopping cart </button>

 

* 참고로 {cart.empty}는 버튼이 처음 렌더링될 때 cart가 정의되지 않아 오류가 발생할 수 없습니다.

 

 

 

 

Reference) 위 내용은 Svelte 공식 문서의 내용을 번역한 내용입니다.

Component directives • Docs • Svelte