# 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\]](https://www.inflearn.com/course/%EB%A7%8C%EB%93%A4%EB%A9%B4%EC%84%9C-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EC%8A%A4%EB%B2%A8%ED%8A%B8)

<div align="left"><img src="https://2456181503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFoRG7N_kopXKHrUIam%2F-MGqndftNeXvP53tyaae%2F-MGqwZuQK1aEaE5Bp21i%2F%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%86%E1%85%A7%E1%86%AB%E1%84%89%E1%85%A5%20%E1%84%87%E1%85%A2%E1%84%8B%E1%85%AE%E1%84%82%E1%85%B3%E1%86%AB%20svelte%20small.png?alt=media&#x26;token=e769cba7-bb5e-40a9-89c6-2879e60242bf" alt="만들면서 배우는 svelte"></div>

