Svelte 상태값

svelte 공식 홈페이지를 가보면 상단 메뉴에 REPL 이라고 되어 있는것을 볼 수 있는데 CodeSandbox, Codeit 과 같이 코드를 입력하면 스벨트에서 어떻게 작동하는지 알 수 있게 해주었다. 

 

여기서 간단히 상태값을 리액트와 다르게 어떻게 사용하는지 알아 보면

 

 

 

<script>
	let count = 1                     // 요기 상태값 선언
	
	const handleClick = () => {
		count += 1
	}
	
</script>

<div>
	상태값: {count}                     // 요기 react jsx 문법에서도 실컷 했듯이 괄호열고 변수로 가져오기
</div>
<button on:click={handleClick}>       // 이 문법은 처음 보긴했는데 저런식으로 쓰는가 보다 하면 되겠다.
	클릭 
</button>

 

아직까지도 성능이 리액트보다 어떻게 훨씬 좋고 이런건 모르겠지만 상태값 선언 부터 짧은게 그냥 맘에든다.