선언적 렌더링

<script>
	import Hello from './Hello.svelte';
	let name = 'world';
	let age = 85;
</script>

<h1>Hello {name}!</h1>
<h2>{age}</h2>

단방향 바인딩

데이터를 바인딩한다. (ex. name, age)

<script>
	let name = 'world';
	let age = 85;
function assign() {
	name = 'Eunji'
	age = 28
}
</script>

<h1>Hello {name}!</h1>
<h2>{age}</h2>
<img src="" alt={name} />
<input type="text" value={name} />
<button on:click={assign}>
	Assign
</button>

양방향 바인딩

값 앞에 "bind:" 명시해주면 양방향으로 바인딩 된다.

<script>
	let name = 'world';
	let age = 85;
function assign() {
	name = 'Eunji'
	age = 28
}
</script>

<h1>Hello {name}!</h1>
<h2>{age}</h2>
<img src="" alt={name} />
<input type="text" bind:value={name} />
<button on:click={assign}>
	Assign
</button>

코드에 active class를 주려고 할 때, 삼항연산자를 사용하여 class에 줄 수 있다.
class={age < 85 ? 'active' : ''}

<script>
	import Hello from './Hello.svelte';
	let name = 'world';
	let age = 85;
function assign() {
	name = 'Eunji'
	age = 28
}
</script>

<h1>Hello {name}!</h1>
<h2 class={age < 85 ? 'active' : ''}>{age}</h2>
<img src="" alt={name} />
<input type="text" bind:value={name} />
<button on:click={assign}>
	Assign
</button>


<style>
	h1 {
		color: red;
		font-size: 20px;
	}	
	.active {
		color: blue;
	}
</style>

Assign 버튼 클릭 시, 28로 상태가 변화면서 active 스타일 속성인 컬러 값도 변하게 된다.