Svelte는 컴포넌트 기반 프레임워크로서, 컴포넌트 간의 통신을 간단하고 효과적으로 처리할 수 있는 다양한 방법을 제공합니다. 아래에 Svelte에서 컴포넌트 간의 통신을 어떻게 이루어지는지에 대해 알아보겠습니다.

1. Props를 통한 통신:
   • 한 컴포넌트에서 다른 컴포넌트로 데이터를 전달할 때, Props를 사용할 수 있습니다.
   • 부모 컴포넌트에서 자식 컴포넌트로 데이터를 Props로 전달하면, 자식 컴포넌트에서 해당 Props를 사용할 수 있습니다.

   예시:

   // Parent.svelte
   <script>
     import Child from './Child.svelte';
     let message = 'Hello from Parent!';
   </script>
      
   <Child {message} />
   
   // Child.svelte
   <script>
     export let message;
   </script>
      
   <h1>{message}</h1>
   

2. Custom Events를 통한 통신:
   • 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하고자 할 때, Custom Events를 사용할 수 있습니다.
   • 자식 컴포넌트에서 dispatch 함수를 사용하여 이벤트를 발생시키고, 부모 컴포넌트에서 on: 접두사를 사용하여 해당 이벤트를 수신할 수 있습니다.

   예시:

   // Child.svelte
   <script>
     import { createEventDispatcher } from 'svelte';
     const dispatch = createEventDispatcher();
      
     function handleClick() {
       dispatch('customEvent', { message: 'Hello from Child!' });
     }
   </script>
      
   <button on:click={handleClick}>Click me!</button>
   
   // Parent.svelte
   <script>
     function handleCustomEvent(event) {
       console.log(event.detail.message);
     }
   </script>
      
   <Child on:customEvent={handleCustomEvent} />
   

3. Stores를 통한 통신:
   • Svelte에는 전역적으로 액세스 가능한 데이터 상태를 관리하기 위한 Stores가 있습니다.
   • 다양한 컴포넌트에서 공유되는 데이터를 Stores를 통해 관리하고 업데이트할 수 있습니다.

   예시:

   // store.js
   import { writable } from 'svelte/store';
   export const count = writable(0);
   
   // Child.svelte
   <script>
     import { count } from './store.js';
      
     function incrementCount() {
       count.update(n => n + 1);
     }
   </script>
      
   <button on:click={incrementCount}>Increment</button>
   
   // Parent.svelte
   <script>
     import { count } from './store.js';
     $: {
       console.log($count);
     }
   </script>
      
   <h1>{$count}</h1>
   

Svelte에서는 이외에도 다양한 통신 방법을 제공하며, 위의 예시들은 그 일부에 해당합니다. 컴포넌트 간의 효과적인 통신을 위해 필요에 따라 적절한 방법을 선택하여 사용할 수 있습니다.

참고 문서:

• Svelte 공식 문서: https://svelte.dev/docs
• Svelte 컴포넌트 통신: https://svelte.dev/docs#component-communication
• Svelte Stores: https://svelte.dev/docs#svelte_store