svelte - 2. State, Reactivity

svelte = writeless code

• State : 상태값

<script>
let count = 0;

function handleClick() {
  count += 1;
} 

</script>

<button on:click={handleClick}>
 CLICK COUNT : {count} times
</button>

• Reactivity : 반응성

$:

<script>
let count = 0;
$: doubled = count * 2;   // 반응성 기호로 선언 > 값이 변경 시 이를 감지

function handleClick() {
  count += 1;
} 

$: if (count >= 10) {
  alert("Click Count 가 10을 넘었습니다! > 0으로 초기화!");
  count = 0;
}

$: {
  console.log( count );
  console.log( doubled ); 
}

</script>

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

<p> DOUBLED : {doubled} ( { count } 의 두배) </p>