Skip to main content
Create new
Introduction
Reactivity
Props
Logic
Events
Bindings
Lifecycle
Stores
Motion
Transitions
Animations
Easing
SVG
Actions
Classes
Component composition
Context API
Special elements
Module context
Debugging
7GUIs
Miscellaneous
App.svelte
<script>
let data = [3,5]; // let 변수는 상태 store입니다.
const sum = (data) => data.reduce((acc, n) => acc + n, 0);
$: total = sum(data); // 2. 변수가 변경되면 $: 로 선언된 값들이 재계산됩니다.
$: count = data.length;
$: avg = total / count;
</script>

<!-- 1. bind된 사용자 input의 value가 변하면, 상태가 알아서 동기화됩니다-->
<label> 토끼 <input type="number" bind:value={data[0]}></label>
<label> 돼지 <input type="number" bind:value={data[1]}></label>
<!-- 3. 상태가 변하면, 그 상태에 의존하는 dom이 변경됩니다 -->
<label> 합계 <output>{total}</output></label>
<label> 사람 수 <output>{count}</output></label>
<label> 평균 <output>{avg}</output></label>
loading Svelte compiler...
/* Select a component to see its compiled code */
result = svelte.compile(source, {
generate: ,
});
/* Select a component to see its compiled code */