Introduction

중첩된 Svelte

import를 통해서 스벨트 파일안에 다른 스벨트를 가져올 수 있다.
같은 p태그여도, 중첩된 요소에는 영향을 주지 않는다.

<script>
	import Nested from './Nested.svelte';
</script>

<p>These styles...</p>
<Nested />

<style>
	p {
		color: purple;
		font-family: 'Comic Sans MS', cursive;
		font-size: 2em;
	}
</style>

HTML tags

쓸일이 있을지는...? 모르겠지만..
백틱으로 스크립트에서 선안하고 다른 HTML 태그에 넣어서 사용할 수 있다.
@html을 사용하여

<script>
	let string = `here's some <strong>HTML!!!</strong>`;
</script>

<p>{@html string}</p>

Reactivity

Reactive assignments

반응적으로 만드는 것.
리액트에서 했던것처럼..? 리터럴을 사용하여 만든 버튼의 예제...

<script>
	let count = 0;

	function handleClick() {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	Clicked {count}
	{count === 1 ? 'time' : 'times'}
</button>

Reactive declarations

$: 이 변수가 바뀌면, 다시 선언한다는 뜻 같다.

<script>
	let count = 1;

	// the `$:` means 're-run whenever these values change'
	$: doubled = count * 2;
	$: quadrupled = doubled * 2;

	function handleClick() {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	Count: {count}
</button>

<p>{count} * 2 = {doubled}</p>
<p>{doubled} * 2 = {quadrupled}</p>

Reactive statements

위에선 변수를 재선언 하는...? 느낌이었지만 이번엔 if문을 함수처럼 사용하여...?
true일 경우 동작하는거 같은데...
온클릭 함수의 작동을 막는건가..? 라고 생각했지만... 작동 자체를 막는건 아니고
handleClick이 작동하여 count가 10이상으로 올라가면 Reactive statements가 작동하여 알람창이 나옴과 동시에 count가 9로 선언된다.

<script>
	let count = 0;

	$: if (count >= 10) {
		alert(`count is dangerously high!`);
		count = 9;
	}

	function handleClick() {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	Clicked {count}
	{count === 1 ? 'time' : 'times'}
</button>