5.4 할당을 통한 트리거 만들기
할당을 좀 더 알아보겠습니다. 할당은 = 연산자를 사용하기만 하면 됩니다. =의 사용법은 일반 프로그램과 같습니다. 하지만 다른 기능이 하나 있지요. 바로! 트리거가 된다는 것입니다.
이 트리거가 있어야 = 연산자 왼쪽에 있는 변수를 감지하고 있는 코드들이 동작하게 합니다. 예제 코드를 볼까요?
이전에 작성한 코드의 count 변수를 가지고 할당을 하면 어떤 일이 일어나는지 확인해보겠습니다. 다음과 같이 코드를 추가합니다.
REPL의 App.svelte
<script>
// 반응형 변수 선언 후 값 할당
let count = 10;
// count값의 변화 감지와 그에 따른 동작 코드, '이 아니라 `(백틱)를 사용하는 데 주의
$: console.log(`count는 ${count}입니다`);
function addCount() {
count = count + 1; // 트리거!!
}
</script>
<!-- 버튼의 클릭 이벤트를 addCount 함수와 연결 -->
<button on:click={addCount}>카운트는 {count}입니다</button>