3. Props

3-1. Declaring props (Props 선언하기)

그동안 주어진 컴포넌트 안에서만 사용 가능한 내부 변수만 다뤘는데 'props'로 외부에서 데이터를 받아서 사용할 수 있습니다.

// Nested.svelte
<script>
  export let answer
</script>
<p>Answer : {answer}</p>
// App.svelte
<script>
  import Nested from './Nested.svelte'
</script>
<Nested answer={42} />

1. export를 통해 외부에서 받아올 props를 선언할 수 있습니다.
2. 사실 JS에서는 export를 이런식으로 사용하지는 않습니다.

3-2. Default values (Props에 디폴트 값 선언하기)

// Nested.svelte
<script>
  export let answer = 'Default'
</script>
<p>The answer is {answer}</p>
// App.svelte
<script>
  import Nested from './Nested.svelte'
</script>
<Nested answer={42} />
<Nested />

1. export할 때 값을 줌으로써 Props의 디폴트 값을 설정할 수 있습니다.

3-3. Spread props (Spread로 props 한번에 넘겨주기)

객체의 모든 속성을 넘겨줘야 할 때 Spread 연산자를 통해 한번에 넘겨줄 수 있습니다.

//App.svelte
<script>
  import Info from './Info.svelte'
  const pkg = {
    name: 'svelte',
    version: 3,
    spped: 'blazing',
    website: 'https://svelte.dev'
  }
</script>
<Info {...pkg}/>
//Info.svelte
<script>
  export let name
  export let version
  export let speed
</script>
...

1. 위의 예시처럼 {...객체}를 통해 객체의 모든 속성을 넘겨줄 수 있습니다.
2. Info 컴포넌트에서 export로 선언하지 않은 변수를 넘겨주어도 에러가 발생하지 않습니다. (ex: website 변수)

튜토리얼 3장 끝

참고문헌

Svelte Tutorial 3장 Props