[Document] Svelte - 3.Props

2022.03.30 - [🧶 𝗪𝗲𝗯/Svelte] - [Document] Svelte - 2.Reactivity

[Document] Svelte - 2.Reactivity

이전 글은 위의 링크를 따라가시면 됩니다.

같은 시리즈를 확인하고 싶으시다면 페이지 맨 하단의 [svelte-document] 태그를 이용해주세요.

---

 

 

 Declaring props 

지금까지 주어진 컴포넌트 내에서만 access 할 수 있는 내부 state에서만 다뤄보았습니다.

실무에서는 당신은 하나의 컴포넌트에서 다른 자식 컴포넌트로 data를 전달해야하는 경우가 많습니다.

이를 하기 위해서, 우리는 속성들을(properties) 선언해야합니다. (일반적으로 줄여서 props 라고 합니다.)

 

Svelte에서 이를 수행하기 위해서 export 키워드를 사용합니다.

(일반적인 자바스크립트에서 모듈을 이용하기 위하여 사용하는 키워드이라서 이렇게 사용하기 낯설지만 일단 사용해봅시다.)

 

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>

결과 화면

export 하기 전

export 키워드 입력 후

 

 

 

 Default values 

우리는 자식 컴포넌트의 디폴트 값 또한 설정할 수 있습니다.

만약 answer 부분을 지운다면, 자식 컴포넌트의 디폴트 값이 설정이 됩니다.

 

App.svelte

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

<Nested answer={42}/>
<Nested/>

Nested.svelte

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

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

결과 화면

첫번째는 App 컴포넌트에서 설정한 answer = 42 값이 나온다.
두번째는 디폴트 값이 화면에 보여진다.

 

 

 Spread props 

만약 객체 타입의 props 를 가지고 있다면, 당신은 해당 값들을 컴포넌트에 spread 할 수 있습니다.

spread: 펼치다, 펴다

 

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}/>

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

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

<Info {...pkg}/>

바인딩을 할 값을 pkg 라는 객체로 묶었습니다.

일일이 pkg.name 이런 식으로 값을 넣을 수 있지만, ...pkg 라는 문법을 사용하여 spread 할 수 있습니다.

자바스크립트의 object spread 문법과 같습니다.

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>

name, version, speed, website 와 같은 4가지의 state를 사용하고 있습니다.

디폴트 값은 없습니다.

결과 화면

 

 

 

 

 

 

 

 

 

#스벨트 도큐먼트 #svelte props #svelte spread #svelte 기초

---