1. 컴포넌트 복사와 붙여넣기

가장 간단한 방법은 컴포넌트를 복사하여 다른 곳에 붙여넣는 것입니다. 이 방법은 컴포넌트를 직접 복사하여 재사용할 수 있게 해줍니다. 하지만 한 번 수정된 경우 모든 복사본을 수정해야 하므로 유지보수에 어려움을 야기할 수 있습니다.

2. 슬롯(Slot) 사용하기

슬롯을 사용하여 컴포넌트의 일부를 동적으로 변경할 수 있습니다. 슬롯은 부모 컴포넌트에서 자식 컴포넌트로 콘텐츠를 전달하는 역할을 합니다. 이를 통해 컴포넌트의 일부를 재사용하면서 자식 컴포넌트에서 다른 내용을 표시할 수 있습니다.

// Parent.svelte

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

<Child>
  <h1>Hello, world!</h1>
</Child>

// Child.svelte

<script>
  export let $$slots;
</script>

<div>
  <slot></slot>
</div>

위의 예시 코드에서는 Parent 컴포넌트에서 Child 컴포넌트를 사용하고 있습니다. Child 컴포넌트에서는 $$slots 변수를 선언하여 부모 컴포넌트에서 전달받은 콘텐츠를 출력하고 있습니다.

3. 컴포넌트 속성(Props) 사용하기

컴포넌트 속성을 사용하여 재사용 가능한 컴포넌트를 생성할 수도 있습니다. 속성은 부모 컴포넌트에서 자식 컴포넌트로 값을 전달할 수 있는 방법입니다.

// Parent.svelte

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

<Child name="Alice" />
<Child name="Bob" />

// Child.svelte

<script>
  export let name;
</script>

<h1>Hello, {name}!</h1>

위의 예시 코드에서는 Parent 컴포넌트에서 Child 컴포넌트를 사용하고 있습니다. Child 컴포넌트에 name 속성을 전달하여 동적으로 컴포넌트 내부의 텍스트를 변경하고 있습니다.

결론

Svelte에서 컴포넌트를 재사용하는 방법은 컴포넌트 복사와 붙여넣기, 슬롯 사용, 컴포넌트 속성 사용 등 여러 가지가 있습니다. 적절한 방법을 선택하여 프로젝트의 요구에 맞는 컴포넌트 재사용을 구현할 수 있습니다.