Svelte - Props

📌 목록

• Introduction
• Declaring Props
• Spread Props
• $$props and $$restProps
• Conclusion
• Reference

📌 Introduction

안녕하세요. 오늘은 svelte에서 props를 어떻게 다루는지에 관해 알아보겠습니다.

📌 Declaring Props

이건 좀 처음에 당황스러운 방식이긴합니다만 export를 사용하면 됩니다.

<script>
  // 이렇게 props를 사용할 수 있어요.
  export let title;
  // 이렇게 기본 props 를 세팅해줄수도 있습니다.
  // export let title = 'Eddie'
</script>

<h1>{title}</h1>

<!-- 이렇게 title을 넣어줄수 있습니다.  -->
<MyHeader title={'Eddie'} />

📌 Spread Props

만약 이런 props를 받는다고 생각해볼게요.

<script>
const info = {
        name: "eddie",
        age: 20,
        sex: "male",
    };
</script>

<MyInfo name={info.name} age={info.age} sex={info.sex}/>

이런식으로 축약을 할수도 있습니다.

<MyInfo {...info} />

📌 $$props and $$restProps

$$props는 모든 props의 접근이 가능합니다.

<script>
  // MyInfo.svelte
  export let name;
  export let age;
  export let sex;

  // ⭐️ 이렇게 접근이 가능합니다.
  $: UpperName = $$props.name.toUpperCase();
</script>

$$restProps는 export로 선언되어지지 않은 props만을 가져옵니다.

<script>
// App.svelte
const info = {
        name: "eddie",
        age: 20,
        sex: "male",
    };
</script>

<MyInfo name={info.name} age={info.age} sex={info.sex} aria-label="my-info" />

<script>
  // MyInfo.svelte
  export let name;
  export let age;
  export let sex;

  // ⭐️ 이렇게 접근이 가능합니다.
  console.log($$restProps) // { aria-lable="my-info"}
</script>

📌 Conclusion

오늘은 이렇게 한번 props에 대해서 알아보았습니다. 생각보다 당황스러운 문법이 등장하여 당황스럽지만 그래도 익숙해져야 하겠죠? 그럼 다음 포스팅에서는 logic에 대해서 한번 알아볼게요. 그럼 안녕~

📌 Reference

• svelte tutorial