Svelte 강의 (8) - Statements

주로 상태 변화를 추적하고 그에 따라 특정 함수를 실행시킬때 활용하는 방법을 알아보는 파트다.

 

<script>
	let count = 0;
	$: console.log(`the count is ${count}`);
	

	function handleClick() {
		count += 1;
	}
</script>

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

 

위와 같이 console.log로 찍어볼 수 있는데 확인하는 방법은 F12를 눌러 Console 부분에 들어가면 로그를 확인할 수 있다.

Console부분에 LOG 출력

 

나중에 많이 쓰지 않을까? 보통 디버깅할때 로그 많이 찍어보니까..

 

<script>
	let count = 0;

	$: if (count >= 10) {
		alert('count is dangerously high!');
		count = 0;
	}

	function handleClick() {
		count += 1;
	}
</script>

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

 

그리고 위의 코드를 실행시키면 count가 10이상일때 메시지가 뜨면서 count를 0으로 초기화 시켜준다.