스벨트 소개
스벨트는 새로운 프레임워크입니다.
직관적이고 짧은 문법으로 양방향 바인딩(two-way binding)과 리액티비티 코드를 작성할 수 있어 빠르고 쉽게 앱을 만들 수 있습니다.
스벨트는 동시에 컴파일러입니다. 스벨트를 사용하기 위해 코드에 <script src="svelte.js"></script> 형태로 js를 삽입하거나 import나 require를 이용하여 모듈 형태로 포함시키지 않습니다. 스벨트 컴파일러가 우리가 작성한 코드를 순수한 자바스크립트 코드로 변환해줍니다.
또한, 가상 돔 같은 추상화 계층을 만들어 내지 않고 일반적인 프레임워크가 런타임에 할 일을 빌드 시에 해결하면서 사용자의 브라우저 부하를 최소화합니다.
<script>
let a = 1;
let b = 2;
</script>
<input type="number" bind:value={a}/>
<input type="number" bind:value={b}/>
<p>{a} + {b} = {a + b}</p>input 값이 변하면 a,b 변수가 자동으로 되도록 bind:value={변수} 형태로 선언했습니다. 이렇게 하면 첫번째 input의 값이 a 변수로 두 번째 input 값이 b 변수로 바인딩 됩니다. 다시 말하면 input 박스의 값이 변하면 자바스크립트 블록의 a 값에 반영(바인딩)된다는 뜻이기도 합니다. 스벨트는 짧고 직관적인 문법으로 적은 양의 코드를 사용합니다. 적은 양의 코드는 버그의 확률도 낮추고 리뷰할 코드의 양도 줄여줍니다.
스벨트는 리액티비티(반응성)이 언어에 포함되어 직관적이고 간단합니다.
양방향 바인딩(two-way binding)
뷰의 데이터(input, option, select의 value)를 모델(자바스크립트의 데이터)에, 모델의 데이터를 뷰에, 양방향으로 실시간으로 반영(바인딩)하는 개념입니다. 스벨트에서 모델의 데이터가 존재하는 곳이 스크립트 블록입니다.
스크립트 블록의 모델, 즉 데이터가 변경되면 뷰에 실시간으로 자동으로 반영됩니다.
스벨트에서 뷰에 해당하는 곳이 HTML 블록입니다.
뷰가 사용자의 마우스 클릭이나 키보드 입력에 의해서 변경되면 스크립트 블록의 데이터가 실시간 반영됩니다. 따라서 스벨트도 양방향 바인딩을 지원한다고 할 수 있습니다.
우리가 특별히 이해해야 할 자바스크립트 함수나 문법은 없습니다. 그냥 a,b를 선언하고 input 엘리먼트 안에서 bind:value={변수명} 형태로 선언만 하면 됩니다. 다른 어떤 것도 없습니다. 빌드시에 스벨트가 알아서 작동하게 해줍니다. 이렇게 스벨트는 리액티비티가 언어에 포함되어서 코드도 짧고 부수적인 아키텍처를 이해할 필요도 없습니다.
Hello, Svelte
스벨트는 컴포넌트 단위로 코드를 작성합니다. 스벨트에서 말하는 컴포넌트란 애플리케이션을 구성하는 블록들이라고 말할 수 있습니다. 한 개 이상의 컴포넌트가 스벨트 애플리케이션을 구성합니다. 한개의 .svelte 파일 안에 스벨트 컴포넌트 코드를 작성합니다.
<!-- JavaScript 코드 -->
<script>
스크립트 블록
</script>
<!-- HTML 코드 -->
<main>
HTML 블록
</main>
<!-- CSS 코드 -->
<style>
스타일 블록
</style>컴포넌트 파일의 구성은 위와 같습니다. 스크립트 블록, HTML 블록, 스타일 블록으로 구성되어 있습니다. HTML 블록의 <main>은 생략하기도 합니다.
스크립트 블록은 우리가 자바스크립트 코드를 작성하는 곳입니다. 여기에 작성도니 코드들이 스벨트 컴포넌트 인스턴스가 생성되어 실행될 때 동작합니다. 주로 컴포넌트의 HTML 블록에 보일 변수들을 선언하고 조작하는 기능을 합니다.
스크립트 블록 내에서 export를 사용해 변수를 선언하면 해당 변수는 컴포넌트 프로퍼티(props)가 됩니다.
스크립트 블록에 선언된 변수들은 반응형 변수(reactive variable)로 사용할 수 있습니다.
선언된 변수를 화면에 표시했거나 변수를 수정해서 화면을 다시 렌더링하고 싶다면 그냥 변수를 할당 연산자(=)를 사용해 변경하면 됩니다. 그러면 자동으로 화면이 바뀝니다. 렌더링을 위한 코드는 작성할 필요가 없습니다. 하지만 주의할 점이 존재합니다. 반응형으로 동작하게 하려면 반드시 할당 연산자(=)를 사용해야 합니다. 특히 배열에서 요소를 다룰 때, push(), .slice()등을 이용하여 값을 변경하면 이 배열은 반응형 변수로서 동작하지 않습니다.
$:를 사용해 반응성(reactivity)를 극대화합니다. 우리가 let으로 선언한 반응형 변수의 값이 변경되면 $: 이하의 식이 실행됩니다. 당연하게도 $: 이하의 식에는 반응형 변수가 포함되어 있어야 합니다.
let a = 1;
let b = 2;
$: console.log(a,b)
변수 a 또는 b의 값이 변경되면 $: 뒤쪽의 코드가 실행됩니다.
스크립트 블록 안에서 $를 이요하여 스토어 변수에 쉽게 접근할 수 있습니다. 스토어(store)의 .set 연산자 없이 스토어에 값을 변경할 수 있습니다.
템플릿 기본 표현식
if 구문은 {#if 조건} 콘텐츠 {/if} 형태로 사용합니다. {#if} 안의 조건식이 참이면 블록 안의 콘텐츠가 돔에 렌더링됩니다.
#each 블록은 배열 형태의 데이터를 사용해, 배열의 길이만큼 루프를 돌면서 #each 블록 안의 콘텐츠를 돔에 렌더링합니다.
#await
#key 블록은 표현식의 내용이 바뀔 때 블록 안의 콘텐츠를 바뀐 값으로 다시 생성합니다.
{@debug}