[SVELTE] Reactivity - Assignments, Declarations, Statements, Updating arrays and objects

 

Reactivity

스벨트의 중심에는 이벤트에 대한 응답과 같이 돔을 애플리케이션 상태와 동기화하기 위한 강력한 반응성 시스템이 있다. 스벨트는 변수 값 할당을 계측하여 돔을 업데이트해야한다고 알려준다.

 

<script>
    let count = 0;

    function incrementCount() {
        count += 1;
    }
</script>

<button on:click={incrementCount}>
    Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

 

스벨트는 컴포넌트의 상태가 변경될 때 돔을 자동으로 업데이트 한다. 종종 컴포넌트의 상태 일부는 다른 부분에서 계산 및 변경될 때마다 다시 계산되어야 한다. 이를 위한 반응성 선언 $: 이 있다. 반응성 값은 여러 번 참조해야 하거나 다른 반응성 값에 의존하는 값이 있는 경우에 유용하다.

 

<script>
    let count = 0;
    $: doubled = count * 2;

    function handleClick() {
        count += 1;
    }
</script>

<button on:click={handleClick}>
    Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

<p>{count} doubled is {doubled}</p>

 

스벨트의 반응성은 할당에 의해 트리거되기 때문에 push 및 splice 와 같은 배열 메서드를 사용하면 자동으로 업데이트가 발생하지 않는다. 이를 수정하기 위해서는 아래처럼 중복되는 할당을 추가하는 것이다.

 

<script>
    let numbers = [1, 2, 3, 4];

    function addNumber() {
        numbers = [...numbers, numbers.length + 1];
    }

    $: sum = numbers.reduce((t, n) => t + n, 0);
</script>

<p>{numbers.join(' + ')} = {sum}</p>

<button on:click={addNumber}>
    Add a number
</button>