Svelte dispatch event

이벤트 정의

createEventDispatche
컴포넌트 간의 사용자 지정 이벤트를 보내기 위해 사용되는 기능입니다. Svelte에서는 이벤트 디스패처 (dispatcher)를 사용하여 자식 컴포넌트에서 발생한 이벤트를 부모 컴포넌트로 전달할 수 있습니다.

App.svelte

<script>
import Child from "./Child.svelte";

function eventHandler(e) {
  console.log(e.detail.myName);
}

</script>

<Child on:event={eventHandler} />

부모 컴포넌트는 자식 컴포넌트에서 디스패치로 보낸 이벤트 이름과 이벤트 핸들러 함수을 연결하여 사용합니다. 

Child.svelte

<script>
import { createEventDispatcher } from 'svelte';
export let value;
const dispatch = createEventDispatcher();

function update() {
  dispatch("event", { myName: 'sebin'});
}
</script>

<button on:click={update}>
  Child click!
</button>

자식 컴포넌트는 createEventDispatcher 함수를 호출하여 Dispatcher를 생성합니다. 해당 함수를 사용해 만들어진 컴포넌트는 버블링이 되지 않는다고 합니다.

dispatcher는 첫번째 매개변수로 이벤트 이름을 지정하고, 두번째 매개변수로는 이벤트 핸들러에 전달할 인자를 설정합니다.

굳이 props로 내려주지 않고 dispatcher을 사용하는 이유는?

1. 추상화와 캡슐화: 컴포넌트가 자신의 이벤트를 직접 관리할 수 있게 함으로써, 부모 컴포넌트는 자식 컴포넌트의 내부 구현에 대해 신경 쓸 필요가 없어집니다. 즉, 자식 컴포넌트의 내부 로직이 변경되더라도, 이벤트 인터페이스가 동일하다면 부모 컴포넌트의 코드를 변경할 필요가 없습니다.
2. 코드의 명확성: dispatch를 사용하면, 이벤트를 발생시키는 위치와 이벤트를 처리하는 위치가 더 명확해집니다. 이벤트를 props으로 내려주는 경우, 이벤트 핸들러를 전달하는 과정이 여러 컴포넌트를 거치면서 복잡해질 수 있습니다. 반면, dispatch를 사용하면 해당 이벤트가 어디서 발생하는지, 어디서 처리되는지 코드를 통해 쉽게 확인할 수 있습니다.
3. 컴포넌트 재사용성: 자식 컴포넌트가 dispatch를 사용하여 이벤트를 발생시키면, 이 컴포넌트는 특정 부모 컴포넌트에 강하게 결합되지 않으며, 다양한 상황에서 재사용할 수 있게 됩니다. 자식 컴포넌트는 자신의 이벤트를 어떻게 처리할지에 대해 걱정할 필요 없이, 단지 이벤트를 발생시킨다는 것에만 집중할 수 있습니다.

결론적으로, dispatch를 사용하는 것은 Svelte에서 컴포넌트간의 통신을 더 명확하고 유연하게 만들어 줄 수 있으며, 특히 컴포넌트의 재사용성과 유지보수성을 높이는 데에 큰 도움이 됩니다.

(출처: Svelte 공식 문서 https://svelte.dev/docs/svelte#createeventdispatcher )