Svelte - Reactivity

📌 목록

• Introduction
• Assignments
• Declarations
• Statements
• Updating arrays and objects
• Conclusion
• Reference

📌 Introduction

안녕하세요. 오늘은 가장 중요한 reactivity에 대해서 알아보겠습니다. 되게 javascript 스럽더라구요. 직관적이기도 합니다. vanila javscript를 짜는 느낌이 많이 강하게 들었던거 같아요. 그럼 한번 볼까요?

📌 Assignments

일단 먼저 간단하게 counter를 구현해볼게요. reactivity를 확인하기 위해서 click event를 사용하게 됩니다.

<script>
  let count = 0;

  const increaseCount = () => {
    count += 1;
  };

  const decreaseCount = () => {
    count -= 1;
  };
</script>

<h1>{count}</h1>
<button on:click={increaseCount}>+</button>
<button on:click={decreaseCount}>-</button>

let 키워드를 간단하게 바로 이렇게 해줄 수 있어요.

📌 Declarations

vue에서의 computed 같은 아이를 소개할까 합니다.

<script>
  let count = 0;

  const increaseCount = () => {
    count += 1;
  };

  const decreaseCount = () => {
    count -= 1;
  };
  // 이렇게 computed value를 지정해줄 수 있어요.
  $: double = count * 2;
</script>

<h1>{count}</h1>
<h1>{double}</h1>
<button on:click={increaseCount}>+</button>
<button on:click={decreaseCount}>-</button>

📌 Statements

svelte은 단순하게 value 뿐 아니라 aribitary value까지 넣을 수 있어요.

<script>
  let count = 0;

  const increaseCount = () => {
    count += 1;
  };

  const decreaseCount = () => {
    count -= 1;
  };

  $: double = count * 2;
  // count 값이 변하면 자동적으로 console.log를 출력합니다.
  $: console.log(`count is ${count}`);
</script>

<h1>{count}</h1>
<h1>{double}</h1>
<button on:click={increaseCount}>+</button>
<button on:click={decreaseCount}>-</button>

또한 이렇게 block으로 나타날수도 있습니다.

<script>
$: if (count === 10) {
    console.log(`count is 10`);
  }
</script>

📌 Updating arrays and objects

Svelte's reactivity는 push나 splice같은 것들로는 trigger 되지 않아요. (react의 불변성을 생각하시면 더 쉬울거 같습니다.)

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

  $: sumOfNumbers = numbers.reduce((a, c) => a + c);

  const addNumber = () => {
    numbers = [...numbers, numbers.length + 1];
  };
</script>

<h1>NUMBERS: {numbers}</h1>
<h1>SUM: {sumOfNumbers}</h1>
<button on:click={addNumber}>ADD</button>

📌 Conclusion

이렇게 오늘은 reactivity에 대해서 한번 알아보았습니다. 정말 많은 코드들이 간소화 되는게 장점인거 같아요. react를 사용해볼때도 엄청 놀랐지만 코드의 양이 생각 보다 많다고 좌절을 느낄때쯤 vue의 간소화에 놀랐는데... svelte를 사용하면서 vue의 간소화된 장점을 더 살리고 더 간결하게 코드를 작성을 할 수 있는거 같아서 너무 좋은거 같아요. 그리고 새삼 빠르게 앱을 실행 시킬수 있다는 장점이 이렇게 크게 다가올줄은 몰랐습니다. 정말 svelte의 매력에 푹 빠질 것만 같아요.

📌 Reference

• svetle tutorial