Svelte Reactivity (반응성)

Svelte에서는 반응성 기호 ( $: ) 를 이용해서 상태값에 따라 반응 하는 것들을 제어 할 수 있는데 리액트를 조금 만 해보고 개발해봤던 사람이라면 바로 useEffect 가 떠오를 것이다. 

 

예제를 보며 한 번 보면 바로 느낌이 올 것이다. 

 

 

 

<script>
	let count = 1
	
	$: doubled = count * 2   // 여기서 반응성으로 선언 
						     // 리액트로 치면 
                             // useEffect(() => {
                             //
                             //	}, [doubled])
    
    
	$: if(count > 9){
		alert('10 이상은 안댐 ㅋㅋ')
		count = 9;
	}
	
	const handleClick = () => {
  		count += 1
	}
</script>

<div>
	상태값: {count}
	더블드: {doubled}                // 여기서 알아서 바뀐다 
</div>
<button on:click={handleClick}>
	클릭
</button>

 

코드를 보면 doubled에는 직접적으로 변화를 주진 않지만 반응성으로 선언 해준 뒤 카운트 값만 바꿔 줬는데 실제로 해보면 잘 바뀌는 것을 볼 수가 있을 것이다.

 

그 예로 

 

<script>
	let count = 1
	
	let doubled = count * 2     // 반응성 말고 그냥 상태값으로 선언 감시 안함
	
	$: if(count > 9){
		alert('10 이상은 안댐 ㅋㅋ')
		count = 9;
	}
	
	const handleClick = () => {
  		count += 1
	}
</script>

<div>
	상태값: {count}
	더블드: {doubled} 
</div>
<button on:click={handleClick}>
	클릭
</button>

위 처럼 반응성에서 빼버리면

 

 

이렇게 더블드는 안바뀌는 것을 확인 할 수 있다.