우측 title 목록에서 필요한거 참조

타입스크립트 지정하는 방법

<script lang="ts">
    export let str: string;
</script>

lang="ts"로 적어서 지정

children 기능 이용하는 방법

Wrapper.svelte

<div class="flex flex-col">
    <div class="text-xl">
        title
    </div>
    <div>
        <slot />
    </div>
</div>

이렇게 <slot /> 을 지정하고

+page.svelte

<Wrapper>
    <div>
        content
    </div>
</Wrapper>

이렇게 사용 가능(변경에 유연한 컴포넌트 만들때 사용하기 좋음)

props 전달하기

+page.svelte

<Wrapper title="제목">
    <div>
        content
    </div>
</Wrapper>

title이라는 프롭스 전달

Wrapper.svelte

<script lang="ts">
  export let title:string;
</script>

<div class="flex flex-col">
  <div class="text-xl">
    {title}
  </div>
  <div>
    <slot />
  </div>
</div>

위와 같이 export let title:string; 이런식으로 받아서 사용 가능

lifecycle

처음 마운트 될때

<script lang="ts">
  onMount(() => {
    // dosomething...
  })
</script>

마운트 해제 될때

<script lang="ts">
  onMount(() => {
    return () => {
      // dosomething...
    }
  })
</script>