TIL 2022-04-20 svelte tutorial 5

Event

<div on:mousemove={handleMousemove}>
	The mouse position is {m.x} x {m.y}
</div>

DOM event handling은 이런 문법으로 사용함.

 

또한 인라인으로 선언해도 큰 문제 없음. 다른 라이브러리들은 그렇게 선언하면 성능 문제가 생기는 경우가 있는데 Svelte는 그런거 없음

 

또한 once, stopPropagation 등의 문구를 붙일 수 있음.

<script>
	function handleClick() {
		alert('no more alerts')
	}
</script>

<button on:click|once={handleClick}>
	Click me
</button>

passive는 touch, wheel 이벤트 성능을 개선시켜줌

preventDefault로 기본 동작 막을수 있고, stopPropagation도 있음... 굳이 함수상에서 선언안해도 인라인으로 선언할 수 있는듯.

 

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

	const dispatch = createEventDispatcher();

	function sayHello() {
		dispatch('message', {
			text: 'Hello!'
		});
	}
</script>

<button on:click={sayHello}>
	Click to say hello
</button>

<script>
	import Inner from './Inner.svelte';

	function handleMessage(event) {
		alert(event.detail.text);
	}
</script>

<Inner on:message={handleMessage}/>

Dispatch란 개념이 나옴. 하위 컴포넌트에서 'message'를 dispatch하면 상위 컴포넌트에서 on:message로 이걸 받아 처리할 수 있음.

 

단방향이 아니라 양방향으로 작동 가능한듯.

 

또한 이 dispatch를 forwarding하려면

<script>
	import Inner from './Inner.svelte';
</script>

<Inner on:message/>

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

	const dispatch = createEventDispatcher();

	function sayHello() {
		dispatch('message', {
			text: 'Hello!'
		});
	}
</script>

<button on:click={sayHello}>
	Click to say hello
</button>

<script>
	import Inner from './Inner.svelte';
</script>

<Inner on:message/>

이렇게 forwarding 해주면 App -> Outer -> Inner 로 구성된 구조에서 App에서 Inner에서 보낸 Dispatch를 받을 수 있음.

 

양방향으로 전달하는게 리액트 상에서는 권장하지 않는 방향이었고 쓰지도 않았었는데 좀 신기하고 생소한 느낌