Svelte

Svelte - Reactivity

eddie0329 2020. 12. 26. 21:39
๋ฐ˜์‘ํ˜•

๐Ÿ“Œ ๋ชฉ๋ก

  • 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

๋ฐ˜์‘ํ˜•