Svelte에서는 export 키워드를 사용하여 컴포넌트의 상태를 다른 컴포넌트에 전달할 수 있습니다. 예를 들어, 다음과 같이 간단한 컴포넌트를 만들어 보겠습니다:

// Counter.svelte

<script>
  export let count = 0;
  
  function increment() {
    count += 1;
  }
</script>

<button on:click={increment}>
  Click me ({count})
</button>

위 예제에서는 count라는 상태를 컴포넌트 외부로 내보내고 있습니다. export 키워드를 사용하여 count를 외부에 공개하고, 다른 컴포넌트에서 이 값을 사용할 수 있게 했습니다.

이제 다른 컴포넌트에서 Counter를 사용해보겠습니다:

// App.svelte

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

<Counter count={5} />

위 예제에서는 Counter 컴포넌트에 count prop을 전달하고 있습니다. 이렇게 전달된 count prop은 Counter 컴포넌트의 count 상태와 연결됩니다. prop으로 값을 전달할 때는 중괄호 {}를 사용하여 전달합니다.

이제 Counter 컴포넌트 안에서 받은 count prop을 사용해보겠습니다:

// Counter.svelte

<script>
  export let count = 0;
  
  function increment() {
    count += 1;
  }
</script>

<button on:click={increment}>
  Click me ({count})
</button>

<p>Received count prop: {count}</p>

위 예제에서는 count prop을 p 요소 안에서 사용하고 있습니다. 이렇게 count를 내보낸 컴포넌트와 받은 컴포넌트 간에 양방향 데이터 바인딩이 이루어집니다.

이렇게 Svelte에서는 export 키워드를 사용하여 컴포넌트의 상태를 외부로 전달할 수 있습니다. 이를 통해 컴포넌트 간에 데이터를 쉽게 공유할 수 있으며, 여러 컴포넌트들이 상호작용할 수 있는 동적인 UI를 만들 수 있습니다.

참고: Svelte docs