Svelte Event forwarding

스벨트 공식홈페이지 Learning중 Part 1 - Eventes - Event forwarding 내용이다

 

Svelte에서 컴포넌트가 중첩되면서 이벤트가 DOM에서처럼 자동으로 상위 컴포넌트로 버블링 되지 않을 때

 

이벤트를 처리하는 방법이다.

 

예제에서는 세가지 컴포넌트가 포함되어 있는데 App.svelte, Outer.svelte, Inner.svelte이다

 

// App.svelte

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

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

<Outer on:message={handleMessage} />


// Inner.svelte

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

	const dispatch = createEventDispatcher();

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

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


//Outer.svelte

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

<Inner />

 

위의 프로그램을 실행하기 위해서는 Outer.svelte에 createEventDispatcher 함수를 사용 하는 것인데 svelte 모듈에서

 

가져 오고 있고 이벤트 디스패처를 생성하는데 사용한다. 이벤트 디스패처는 자식 컴포넌트에서 부모 컴포넌트로 

 

이벤트를 보내는 방법이고 

 

// first solve

<script>
  import Inner from './Inner.svelte';
  import { createEventDispatcher } from 'svelte';

  const dispatch = createEventDispatcher();

  function forward(event) {
    dispatch('message', event.detail);
  }
</script>

<Inner on:message={forward}/>

 

위와 같은 코드를 쓴다. forward는 message 이벤트를 전달하는데 사용하는데 Inner 컴포넌트에서 message 이벤트를 

 

수신하고 발생하면 동일한 message 이벤트를 디스패치 한다.

 

마지막줄에서 Inner 컴포넌트에 대한 message 이벤트 리스너를 설정하는데 Inner가 message 이벤트를 발생시키면

 

forward가 함수가 트리거 되는 것이다.

 

하지만 이 코드는 너무 길기때문에

 

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

<Inner on:message/>

 

위 코드를 권장하는데 이 경우에는 on:message는 모든 message 이벤트를 전달하라는 의미이다.

 

즉, createEventDispatcher를 사용하여 이벤트 디스패처를 생성, 사용함으로 중첩된 컴포넌트에서 특정 이벤트를

 

포함하는 상위 컴포넌트로 전달하는 것이다.