[reactivity] assignments

svelte의 파워풀한 반응성(reactivity)에 대한 설명입니다.

 

스벨트는

DOM에서 사용하는 변수의 값이 변화를 감지하고 DOM을 수정하여 반영합니다.

이러한 것을 반응, 반응형, Reactivity라고 합니다.

 

코드 확인

<script>
	let count = 0;

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

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

설명

• 버튼을 클릭(이벤트 핸들링에 대한 설명은 곧 업데이트 하고 링크 표시하겠습니다.)하면
  increment라는 이벤트 핸들러에 의해 count 변수의 값이 1 증가합니다.
• 변수의 값이 변화하면 감지하여 증가된 count 값이 반영되어 출력됩니다.

 

개발환경 구성없이 간단한 테스트는 REPL에서

https://svelte.dev/repl