[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.svelte
에 message
속성을 전달합니다.
Child.svelte
에서는 export let message;
코드를 통해 message
속성을 받아와 사용할 수 있습니다. 이 예시에서는 <p>{message}</p>
코드를 통해 message
속성의 값을 화면에 출력하고 있습니다.
이처럼 Svelte에서는 속성(props)을 통해 컴포넌트 간에 데이터를 전달할 수 있습니다. 속성(props)은 컴포넌트를 유연하고 재사용 가능하게 만들어주는 중요한 기능입니다.
더 자세한 내용은 Svelte 공식 문서를 참고하시기 바랍니다. Svelte 공식 문서