[javascript] Svelte에서 속성(props)을 전달하는 방법은 어떻게 되나요?

Svelte는 간단하고 직관적인 프레임워크로서 컴포넌트 간에 데이터를 전달하기 위해 속성(props)을 사용합니다. 속성(props)은 부모 컴포넌트로부터 자식 컴포넌트로 값을 전달하는 데 사용됩니다.

아래는 Svelte에서 속성(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 속성을 전달하고 있습니다. Child.svelte에서는 export 키워드를 사용하여 속성(props)으로 message를 선언하고 사용할 수 있습니다.

Parent.svelte에서는 let 키워드를 사용하여 message 변수를 선언하고 값을 할당합니다. 그리고 <Child {message} /> 코드를 통해 Child.sveltemessage 속성을 전달합니다.

Child.svelte에서는 export let message; 코드를 통해 message 속성을 받아와 사용할 수 있습니다. 이 예시에서는 <p>{message}</p> 코드를 통해 message 속성의 값을 화면에 출력하고 있습니다.

이처럼 Svelte에서는 속성(props)을 통해 컴포넌트 간에 데이터를 전달할 수 있습니다. 속성(props)은 컴포넌트를 유연하고 재사용 가능하게 만들어주는 중요한 기능입니다.

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