Svelte는 컴포넌트 기반의 웹 개발을 위한 프레임워크로, 컴포넌트의 재사용성을 강조합니다. Svelte에서 컴포넌트를 재사용하는 방법에 대해 알아보겠습니다.

1. 컴포넌트 생성 먼저, 재사용하고자 하는 컴포넌트를 생성합니다. Svelte에서는 .svelte 확장자를 갖는 파일로 컴포넌트를 작성합니다. 예를 들어, Button.svelte라는 파일에 버튼 컴포넌트를 작성하겠습니다.

<script>
  export let label;
</script>

<button>{label}</button>

<style>
  button {
    /* 버튼 스타일 정의 */
  }
</style>

1. 컴포넌트 재사용 재사용할 컴포넌트를 다른 Svelte 파일에서 import하여 사용할 수 있습니다. 예를 들어, App.svelte 파일에서 Button 컴포넌트를 재사용하겠습니다.

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

<Button label="Click me" />

위의 예제에서는 Button 컴포넌트를 App.svelte에 import하여 <Button label="Click me" />와 같이 사용합니다. 이렇게 하면 Button 컴포넌트가 재사용되며, label 속성으로 컴포넌트에 전달된 값을 사용할 수 있습니다.

1. 컴포넌트 속성 전달 컴포넌트에 값을 전달하기 위해서는 컴포넌트의 속성을 정의하고, 해당 속성을 컴포넌트에서 사용할 수 있도록 해야 합니다. 위의 예제에서는 label 속성을 Button 컴포넌트에 전달하고, 컴포넌트 내에서 {label}과 같이 사용하여 버튼의 텍스트로 표시하였습니다.

이와 같이 Svelte에서는 컴포넌트의 재사용을 위해 import와 속성 전달을 활용할 수 있습니다. 이를 통해 코드의 재사용성과 유지보수성을 향상시킬 수 있습니다.

자세한 내용은 Svelte 공식 문서를 참고하시기 바랍니다.