[Svelte] 기본 공부하기

<script>
	import '../app.css';

	let { children } = $props();
</script>

{@render children()}

분명 배웠는데 스벨트킷을 설치하니 layout.svelte에 처음보는게 많이 떴다.

모르는 것만 쓰겠다.
일단 첫 번째, $가 왜 붙는지 알아보겠다.

$는 반응형이다. 이게 앞에 붙으면 해당 함수나 변수는 반응형이 된다.
반응형 함수 앞에 이게 붙기도 한다.
그래서 props가 변할때 마다 children에 구조분해할당이 되는 것이다.

그리고 대망의 render children

이거는 이라고 그냥 컴포넌트를 붙이는 것과 같다. 라는데 아닌 것 같다

저렇게 쓰면 {@render children()} 부분이 하위 컴포넌트가 적용되고, 모든 하위 컴포넌트에 레이아웃이 적용된다.

지금 이해 한 것
1. props는 스벨트킷의 라우팅 시스템이 컴포넌트를 감싸고 있어서 라우팅 시스템이 제공하는 props를 받아왔다. -> 근데 이게 뭐지?

-> 정답

SvelteKit의 라우팅 시스템이 제공하는 주요 props들은:
children
현재 활성화된(방문한) 라우트의 페이지 컴포넌트를 렌더링하는 함수
예: /about 페이지를 방문하면 about/+page.svelte 컴포넌트를 렌더링하는 함수
data
+page.server.js나 +page.js에서 반환된 데이터
페이지에 필요한 데이터를 포함
params
URL 파라미터 정보
예: /blog/[slug]에서 slug 값
url
현재 URL 정보
pathname, search, hash 등의 정보 포함
예를 들어, 모든 props를 받아보고 싶다면:
이건 잘못된 정보 같다. 실제로 해보니까 안되기도 하고, params나 url은 store에 page에서 가져와야 한다고 한다. layout이라서 children props가 내려온거지 다른 스벨트 파일은 안된다고 한다.

<script>
    let { children, data, params, url } = $props();
</script>

로 하랜다 이걸 이제야 알려주냐..

그리고 추가로 하위 라우터에 layout.svelte을 만들면 중첩 적용 된단다
[상위 레이아웃 시작]

[하위 레이아웃 시작]
    [페이지 내용]
[하위 레이아웃 끝]

[상위 레이아웃 끝]