부모 컴포넌트에서 자식 컴포넌트로 데이터 전달하기

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위해, 부모 컴포넌트의 속성을 자식 컴포넌트로 전달해야 합니다. 이를 위해서는 자식 컴포넌트를 부모 컴포넌트 내부에서 사용하고, 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>

위의 예제에서, Parent.svelte에서 Child.svelte를 사용하고 message라는 prop을 전달합니다. Child.svelte에서는 message prop을 받아와 출력합니다.

자식 컴포넌트에서 부모 컴포넌트로 데이터 전달하기

자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하기 위해, 이벤트를 발생시켜야 합니다. 자식 컴포넌트에서 발생시킨 이벤트는 부모 컴포넌트에서 수신하고 처리할 수 있습니다.

// Parent.svelte
<script>
  let message = '';

  const handleMessage = (event) => {
    message = event.detail;
  };
</script>

<p>{message}</p>
<Child on:message={handleMessage} />

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

  const dispatch = createEventDispatcher();

  const sendMessage = () => {
    dispatch('message', 'Hello from child');
  };
</script>

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

Child.svelte에서는 createEventDispatcher()를 사용하여 이벤트 디스패처를 생성하고, sendMessage 함수 내에서 'message'라는 이벤트를 발생시키고 데이터 'Hello from child'를 전달합니다. Parent.svelte에서는 on:message={handleMessage}를 사용하여 이벤트를 수신하고 handleMessage 함수를 실행하여 전달된 데이터를 사용할 수 있습니다.

이렇게 간단하게 Svelte에서 부모-자식 컴포넌트 간의 통신을 수행할 수 있습니다. 자세한 내용은 Svelte 공식 문서를 참조하세요.