reactivity

svelte의 가장 강조되고 있는 기능 중에 하나가 바로 reactivity 즉 손쉬운 반응성 구현입니다.

반응성이란 선언된 state의 상태에 따라서 특별한 호출 없이 HTML 영역 및 바라보는 변수 들의 상태가 바로바로 변경되는 것 이라고 생각하시면 되겠습니다.

간단한 예제를 통해 이 반응성을 알아보겠습니다.

예를 들어 다음과 같은 예제를 만들었을 때 p태그 안의 내용은 특별한 직접적인 조작 없이 state의 상태에 따라서 보이고 안보이고가 결정됩니다. 이것이 바로 reactivity 즉 반응성입니다.

<script>
	// state 생성
	let active = false
</script>

<span><input type="checkbox" bind:checked={active} /> 상태</span>

<br>

<p class:view={!active} >active is {active}</p>

<style>
	.view {
		display: none;
	}
</style>

작성된 코드를 보면 좀 더 이해가 쉬울 것입니다. 다음은 count 변수를 주고, 이 변수가 +1 씩 증가하는 버튼을 만들어 count 값이 증가하는 코딩입니다.

<script>
let count = 0

function handleClick() {
	// 이벤트 코드
	count += 1
}

</script>

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

handleClick액션을 주면 count 값이 계속 증가하게 됩니다. 그리고 이 증가한 내용은 즉시 html영역에 반영이 됩니다. html영역을 값에 따라 변화를 주기위해 특별한 호출이 필요하지 않습니다. 단지 변수를 선언하고, 그 변수를 바라 보게만 하면 되는 것입니다.

삼항연산자 설명

변수 == 값 ? '참일때' : '거진일때'

위의 연산자는 아래의 if문을 심플하게 구현한 코드입니다. 이것을 삼항연산자라고 합니다. 

if(변수) {
	 '참'
}
else {
	'거짓'
}

$: 설명

HTML영역 뿐만 아니라 스크립트 영역도 이와 비슷한 방식으로 작성이 가능합니다. let, const로 변수를 지정하지 않고 반응성을 주고 싶은 변수는 $:로 정의하기만 하면 됩니다.

예제로 조금전 만든 코드에 doubled라는 변수를 $:로 선언해 어떻게 작동하는지 보도록 하겠습니다.

<script>
let count = 0
$: doubled = count * 2

*$*: {
	console.log( count )
	console.log( doubled )
}

function handleClick() {
	// 이벤트 코드
	count += 1
}

</script>

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

<p>{count} 두배는 {doubled} <p/>

count가 변화가 일어나면 자동으로 doubled도 값이 변하고 다시 이를 바라보는 영역에 적용되는 것을 볼 수 있습니다.

<script>
let count = 0
$: doubled = count * 2

$: if(count >= 10) {
	alert('카운트가 10을 넘었습니다. ')
	count = 9
}

$: {
	console.log( count )
	console.log( doubled )
}

function handleClick() {
	// 이벤트 코드
	count += 1
}

</script>

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

<p>{count} 두배는 {doubled} <p/>

주의할 점은 선언된 값을 변화할 때 push, slice 등 으로 변수를 직접 변화를 주기만 해서는 적용이 안됩니다.

꼭 변수 = 변수.push 이런 식으로 재할당 해주셔야 합니다.

물론 svelte가 아닌 react나 vue등에서도 이런 기능을 구현할 수 있지만, 선언방식이 훨씩 복잡한 것을 다음 코드 비교를 통해서 볼 수 있습니다. svelte는 그냥 $:를 선언하는 것 만으로 반응성이 깃든 기능을 만들 수 있는 것입니다.

-- vue

<template>
  <div>
    <button @click="handleClick">
      Clicked {{count}} {{count === 1 ? 'time' : 'times'}}
    </button>

    <p>{{count}} doubled is {{doubled}}</p>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        count: 0
      }
    },
    computed: {
      double () {
        return this.count * 2
      }
    },
		watch: {
      count (count) {
        if (count >= 10) {
          alert(`count is dangerously high!`);
          this.count = 9;
        }
      }
    },
    methods: {
      handleClick () {
        this.count += 1;
      }
    },
  }
</script>

[만들면서 배우는 Svelte]

만들면서 배우는 svelte