Svelte 강의 (11) - Spread props

Svelte에서 컴포넌트에 속성을 전달하는 방법을 설명하는 파트다.

 

먼저 App.svelte에서 PackageInfo 컴포넌트에 pkg 객체의 속성들을 전달하는 방법을 설명하는데

 

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

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

<PackageInfo
	name={pkg.name}
	speed={pkg.speed}
	website={pkg.website}
/>


output : The svelte package is blazing fast. Download version undefined from npm and learn more here

 

처음에는 PackageInfo에 version이 빠져 있어 밑에와 같이 version undefined라고 나온다

 

version = {pkg.version}을 추가하면 되고 이보다 간단한 방법으로

 

<PackageInfo {...pkg} />

 

이렇게 객체의 속성들을 전개해서 전달하면 더 편하다고 한다.

 

$$props 방법도 소개하고 있는데 속성들을 명시적으로 열거하지 않고 전달된 모든 속성에 접근하는 또 다른 방법이다.

 

근데 특별한 경우를 제외하고는 권장하지 않는다니까 일단 넘어가도 무방할거같다.