Svelte TIL 01

참고

Svelte.js 입문 가이드 - HEROPY

특징

• Virtual DOM의 생성과 diffing이 없다
• 브라우저에서 framework가 동작하지 않으며, 마치 컴파일러처럼 기능한다
• CDN을 지원하지 않는다

선언적 렌더링

<!-- [코드1-1] -->
<script>
	let name = 'wonjin';
</script>
<h1>I'm {name}</h1>

위 예제에서 변수 name을 선언적 렌더링 했다고 표현한다.

반응성

<!-- [코드1-2] -->
<script>
	let name = 'wonjin';
    function changeName() {
    	name = 'Yi Wonjin';
    }
</script>

<h1>{name}</h1>
<button on:click={changeName}> change </button>

script태그 내부에서 name값을 변경하는 changeName함수를 선언했다. 이 함수는 button태그가 클릭됐을 때 실행된다.

위 코드로부터 버튼이 클릭되었을 때 name변수가 바뀌고, 이에 따라 h1태그 태부의 텍스트가 변화하는 반응을 보일 것으로 예상할 수 있다.

Svelte에서는 값이 할당되었을 때 반응성을 가진다.

단방향 바인딩

<!-- [코드1-3] -->
<script>
	let text = 'wonjin';
</script>

<h1>{text}</h1>
<input type="text" value={text} />

script태그 내부에서 선언 및 할당된 text의 값에 따라 input의 value가 달라진다.

그러나 input의 value를 통해서 text변수의 값을 변경할 수는 없다. 데이터를 변화시키는 방향이 단방향이므로 이를 단방향 바인딩 이라고 한다.

양방향 바인딩

<!-- [코드1-4] -->
<script>
	let text = 'wonjin';
</script>

<h1>{text}</h1>
<input type="text" bind:value={text} />

[코드1-3]의 input의 value attribute앞에 bind:문구를 추가했다. 해당 코드에서 input의 value를 변화시키면 실제로 text의 값도 변화한다. 데이터를 양쪽에서 변화시킬 수 있으므로 이를 양방향 바인딩 이라고 한다.

스타일

<!-- [코드1-5] -->
<script>
	let number = 0;
	let down = () => { number--; }
	let up = () => { number++; }
</script>

<h1 class={(number < 0) ? 'under-zero' : 'more-zero"}>{number}</h1>
<button on:click={down}>down</button>
<button on:click={up}>up</button>

<style>
	.under-zero {
		color : red;
	}
	.more-zero {
		color : green;
	}
</style>

style태그를 통해 해당 문서 내에서 스타일을 지정할 수 있다.

number 변수값에 해당하는 숫자가 h1태그로 표시된다. down버튼을 통해 1감소, up버튼을 통해 1증가 시킬 수 있다.
number 변수값이 0보다 작으면 빨간색, 0이상이면 초록색으로 스타일을 지정한다.