[javascript] Svelte에서 컴포넌트 간의 통신 방법에는 어떤 것들이 있나요?

24 Nov 2023

javascript

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>

<p>{message}</p>

스토어를 통한 통신: Svelte는 stores라는 개념을 제공하여 여러 컴포넌트간에 상태를 공유할 수 있도록 합니다. 스토어는 공유 상태를 저장하고 변경할 수 있는 기능을 제공합니다.

// store.js
import { writable } from 'svelte/store';

export const count = writable(0);

// Parent.svelte
<script>
  import { count } from './store.js';

  let increment = () => {
    count.update(n => n + 1);
  }
</script>

<button on:click={increment}>Increment</button>

// Child.svelte
<script>
  import { count } from './store.js';
</script>

<p>{$count}</p>

커스텀 이벤트를 통한 통신: 자식 컴포넌트에서 부모 컴포넌트로 이벤트를 발생시키고, 부모 컴포넌트에서 이벤트를 수신하여 처리할 수 있습니다.

// Parent.svelte
<script>
  let handleMessage = (event) => {
    console.log(event.detail);
  }
</script>

<Child on:message={handleMessage} />

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

  let dispatch = createEventDispatcher();
  
  let sendMessage = () => {
    dispatch('message', { text: 'Hello from child!' });
  }
</script>

<button on:click={sendMessage}>Send Message</button>

이외에도 Svelte에서는 context API, PubSub 라이브러리 등을 사용하여 컴포넌트 간의 통신을 할 수 있습니다. 각각의 방법은 다른 상황에 적합하므로, 프로젝트의 요구사항과 컴포넌트 구조에 맞게 선택하여 사용하시면 됩니다.