2. Reactivity

2-1. Assignments (반응형 할당하기)

Svelte의 핵심은 이벤트에 반응하는 것처럼 DOM과 변수의 동기화 상태를 유지하기 위한 강력한 반응형 시스템입니다.

<script>
  let count = 0  
  function incrementCount(){
    count +=1
  }
</script>
<button on:click={incrementCount}>
  Clicked {count} {count <= 1 ? 'time' : 'times'}
</button>

1. 위의 코드처럼 Svelte는 DOM이 업데이트해야 함을 알려주는 코드를 갖고 이 할당을 수행합니다.

2-2. Declarations (반응형 변수 선언하기)

Svelte는 반응형 선언을 통해 변수와 다른 것과도 연결할 수 있습니다.

<script>
  let count = 0;
  $: doubled = count * 2
</script>
<button on:click={() => ++count}>
  {count}
</button>
<p>
  {count} doubled is {doubled}
</p>

1. 위의 코드처럼$:를 붙여서 선언한 변수는 변수가 참조된 값이 변경될 때마다 해당 코드를 다시 실행합니다.
2. 그래서 버튼을 클릭해서 count가 변경될 때마다 count를 참조하는 doubled의 선언 코드가 다시 실행되고 count가 변할 때마다 doubled도 함께 변경되게 됩니다.
3. 이런 반응형 선언은 여러 번 참조하거나 다른 반응형 변수에 의존적일 때 유용합니다.
4. 마치 React의 useEffect처럼 Side Effect가 발생할 때 유용하게 사용할 수 있습니다.

2-3. Statements (반응형으로 명령문 실행하기)

반응형 변수엔 제한이 없습니다.

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

1. 2-2 예제처럼 단순히 변수만 선언할 수도 있고
2. 위의 예시처럼 코드블럭, if문 등 특정 명령을 수행할 수도 있습니다.

2-4. Updating arrays and objects (반응형으로 배열/객체 업데이트하기)

결론부터 말하자면 배열이나 객체를 업데이트하기 위해서는 업데이트할 변수가 = 왼편에 직접 보여야 업데이트가 적용됩니다.

function addNumber(){
  numbers = [...numbers, numbers.length + 1]	// O
  numbers.push(numbers.length + 1)				// X
}

1. 위의 예시처럼 원본 배열을 수정하는 push 메소드를 사용해도 업데이트가 유발되지 않고 numbers에 업데이트하려는 배열을 다시 할당해야 업데이트가 유발됩니다.
2. 왜냐하면 Svelte의 반응성은 할당에 의해 유발되기 때문에 배열과 객체를 스스로 업데이트하는 메소드는 업데이트를 유발하지 않습니다.
3. push와 비슷한 pop, shift, splice 등의 함수도 똑같이 적용됩니다.
4. 그래서 간단하게 생각하자면 업데이트되는 변수는 = 왼쪽에 반드시 보여야 합니다.

튜토리얼 2장 끝

참고문헌

Svelte Tutorial 2장 Reactivity