이벤트와 상태

<script>
let number = 0;

$: numberCalc = number < 0 ? 0 : number;

const increment = () => {
	number += 1;
};

const decrement = () => {
	number -= 1;
};
</script>

<style>
</style>

<p>{number}</p>
<p>{numberCalc}</p>

// 함수 제어
<button type="button" on:click|preventDefault="{increment}">+</button>
<button type="button" on:click|preventDefault="{decrement}">-</button>

// 내부 제어
<button type="button" on:click|preventDefault="{() => (number += 1)}">+</button>
<button type="button" on:click|preventDefault="{() => (number -= 1)}">-</button>

변수 선언 후 $: 표시로 상태 변환 체크 가능

상태 종속성이 잘못된 경우 컴파일되지 않으므로 사용시 주의

context="module"

<script context="module">
let number = 0;
</script>

<script>
const add = () => {
	number += 1;
};
</script>

<style>
</style>

script 영역이 2개 일때 역할이 들어 가는 부분 사용 시
module 부분은 반응성이 없고 한번만 실행 되므로 데이터를 읽기 전에 사용