반응형
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>
위 처럼 반응성에서 빼버리면
이렇게 더블드는 안바뀌는 것을 확인 할 수 있다.
반응형