Declaring Props

지금까지는 내부상태만 다루었다.
즉, 동일 콤포넌트 내에서만 적용된다.
타 컴포넌트로 상태를 전달하기 위해서는 props라고 불리는 properties를 선언해야 한다.
svelte에서는 변수선언 앞에 export를 붙이면 props로 선언된다.

샘플은 App -> Nested로 answer란 props로 42라는 값을 전달하는 과정이다.
Nested의 answer 선언앞에 export를 붙이지 않으면 값이 전달되지 않고, 초기화 되지 않았기 때문에 undefined라고 표기 된다.

App.svelte

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

<Nested answer={42}/>

Nested.svelte

<script>
	export let answer;
</script>

<p>The answer is {answer}</p>

Default values

props에 값이 디폴트 값을 넣고 싶으면 변수 선언시 값을 할당하면 된다.

샘플에서 answer에 값이 전달되지 않으면, 디폴트 값이 'a mistery'로 표기 된다.

<script>
	export let answer = 'a mistery';
</script>

<p>The answer is {answer}</p>

Spread props

props로 넘겨야 하는 값이 많다면, spread props를 사용하여 넘길수 있다.
단, props로 전달하려는 오브젝트의 이름은 받는쪽과 동일해야 한다.
선언순서는 상관없다.

App.svelte

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

	const pkg = {
		name: 'svelte',
		version: 3,
		speed: 'blazing',
		website: 'https://svelte.dev'
	};
</script>

<!-- 일반적인 방법 -->
<Info name={pkg.name} version={pkg.version} speed={pkg.speed} website={pkg.website}/>
  
<!-- spread props 방법을 사용한 경우 -->
<Info {...pkg}/>

Info.svelte

<script>
	export let name;
	export let version;
	export let speed;
	export let website;
</script>

<p>
	The <code>{name}</code> package is {speed} fast.
	Download version {version} from <a href="https://www.npmjs.com/package/{name}">npm</a>
	and <a href={website}>learn more here</a>
</p>