Svelte의 핵심은 이벤트에 반응하는 것처럼 DOM과 변수의 동기화 상태를 유지하기 위한 강력한 반응형 시스템입니다.
<script>
let count = 0
function incrementCount(){
count +=1
}
</script>
<button on:click={incrementCount}>
Clicked {count} {count <= 1 ? 'time' : 'times'}
</button>
Svelte는 반응형 선언을 통해 변수와 다른 것과도 연결할 수 있습니다.
<script>
let count = 0;
$: doubled = count * 2
</script>
<button on:click={() => ++count}>
{count}
</button>
<p>
{count} doubled is {doubled}
</p>
$:
를 붙여서 선언한 변수는 변수가 참조된 값이 변경될 때마다 해당 코드를 다시 실행합니다.count
가 변경될 때마다 count
를 참조하는 doubled
의 선언 코드가 다시 실행되고 count
가 변할 때마다 doubled
도 함께 변경되게 됩니다.반응형 변수엔 제한이 없습니다.
<script>
$: console.log('the count is ' + count)
$: {
console.log('the count is ' + count)
alert('I SAID THE COUNT IS ' + count)
}
$: if (count >= 10 ){
alert('count is dangerously high!')
count = 9
}
</script>
결론부터 말하자면 배열이나 객체를 업데이트하기 위해서는 업데이트할 변수가 =
왼편에 직접 보여야 업데이트가 적용됩니다.
function addNumber(){
numbers = [...numbers, numbers.length + 1] // O
numbers.push(numbers.length + 1) // X
}
=
왼쪽에 반드시 보여야 합니다.