<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 스타일 속성인 컬러 값도 변하게 된다.

새로운 접근 방식의 Front-End Framework

Svelte 특징

1. 더 적은 코드

• 높은 가독성 유지
• 개발 시간 단축
• 쉬운 리팩토링
• 쉬운 디버깅
• 더 작은 번들(SPA 최적화)
• 낮은 러닝 커브

<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>

2. 가상돔이 없다. (No Virtual DOM!)

• No Diffing
• No Overhead
• 빠른 성능

No Diffing

스벨트는 갱신은 똑같이 일어나지만 가상돔을 생성하고 비교하는 부분이 없다. 리액트와 돔에 비해 오버헤드가 일어나지 않지 않아 아낄 수 있다.

오버헤드(overhead)는 어떤 처리를 위해 들어가는, 간접적인 시간이나 메모리 등

자바스크립트 환경 런타임에서 충분히 빠른 성능을 보여주고 퍼포먼스가 올라가고 메모리 사용이 적어진다. 리액트와 스벨트의 성능면은 스벨트가 더 좋다.

3. 진짜 반응성. (Truly Reactive)

• 프레임워크를 런타임에서 사용하지 않고 순수한 바닐라JS가 브라우저에서 동작한다.
• 일반 의존성(devDependencies) 컴파일러 (작업물'애플리케이션'을 바닐라JS로 변환(컴파일)하고 그 결과만 동작하기 때문에, 브라우저(런타임)에서 동작하지 않는 컴파일러라고 한다.)
• 명시적 설계(창의적 작업)

반응성이란 애플리케이션 상태(데이터)의 변화가, DOM에 자동으로 반영되는 현상을 말합니다.

Svelte 단점

• 낮은 성숙도(작은 생태계)
• CDN 미제공 (런타임에서 동작하지 않기 때문에)
• IE 지원하지 않는다.