[Svelte] 모르는거 배우기

개요

그냥 스벨트 파일을 열고 자동완성으로 탭을 눌렀더니 이런 코드를 만들어줘서 이걸 학습하려한다...

<script>
    import { onMount } from "svelte";
    import { page } from "$app/stores";

    let { data } = $props();

    onMount(() => {
        $page.data = {
            title: "Diary"
        }
    })
</script>

<div>
    <h1>Diary</h1>
    <p>
        {data.title}
    </p>
</div>

AI한테 물어본 결과를 중심으로 학습

...
요약하자면, 이 코드는 Svelte 컴포넌트가 화면에 나타날 때 특정 작업을 수행하고(onMount), SvelteKit 라우팅 시스템을 통해 페이지 정보를 얻으며(page 스토어), 서버로부터 전달된 데이터(data prop)를 사용하기 위한 기본적인 설정들을 포함하고 있습니다.

onMount가 뭘까?

리액트로 치면 의존성 배열이 존재하지 않는 useEffect와 같은건가?

싶어서 AI한테 물어봤더니

비슷하다고 답변이 왔다. useEffect에 의존성배열 안에 아무것도 없다면, 페이지가 마운트될때 최초 한번만 실행되는 구문이라고 알고 있는데, onMount도 같은 것 같다.

대신 onMount에 return값을 넣어준다면, 해당 컴포넌트가 DOM에서 제거될 때 실행되고, 이는 Cleanup기능을 한다고 한다.

$props에 대해 알아보자

$props라는 문법은 Svelte5부터 도입된 룬 문법이라고 한다.
그냥

const { as } = $props();

라고 하면 as라는 이름의 props가 구조분해할당으로 선언되는 것 같다.

page에 대해 알아보자

import 는 $app/stores 에서 하는 것 같고..

호출은 import {page} from $app/stores

하고 $page.data = { title : "diary" }
이 경우, 스벨트킷이 제공하는 store에 data 객체에 저 값이 덮어씌워지는거라고 한다. 그러므로 페이지의 데이터 부분을 건드리는 것은 값이 변경되는 걸 반영하는 것 보다(반응형) 그냥 정적으로 선언하는게 맞는 것 같은데 왜 onMount에 했는진 모르겠다.

$page.params.id 와 같이 활용하여 동적 라우트 ID값을 가져올 수 있다고 한다.

그냥 페이지 정보 가져오는듯

그렇구만그렇구만