간결합니다. 그래도 잘 동작합니다. 어떻게 작성되었는지 코드를 한 블록씩 살펴보겠습니다.

스크립트 블록

<script>
    let a = 1;
    let b = 2;
</script>
… 생략 …

첫 번째는 스크립트 블록입니다. 자바스크립트 변수 a, b를 선언(let)했습니다.

bind:를 사용한 연결

… 생략 …
<input type="number" bind:value={a}>
<input type="number" bind:value={b}>
… 생략 …

input 박스의 값이 변하면 a, b 변수가 자동으로 되도록 bind:value={변수} 형태로 선언했습니다. 이렇게 하면 첫 번째 input의 값이 a 변수로 두 번째 input 값이 b 변수로 바인딩됩니다. 다시 말하면 input 박스의 값이 변하면 자바스크립트 블록의 a 값에 반영(바인딩) 된다는 뜻이기도 합니다.

템플릿 문법으로 화면에 표시하기

… 생략 …
<p>{a} + {b} = {a + b}</p>

그리고 p 엘리먼트에서 {a+b}는 자바스크립트의 a 변수와 b 변수의 값을 더하여 화면에 표시하는 템플릿 문법입니다.

스벨트는 짧고 직관적인 문법으로 적은 양의 코드를 사용합니다. 적은 양의 코드는 버그의 확률도 낮추고 리뷰할 코드의 양도 줄어줍니다.