하지만 주의할 점이 있습니다. 반응형으로 동작하게 하려면 반드시 할당 연산자(=)를 사용해야 합니다. 특히 배열에서 요소를 다룰 때 .push(), .slice() 등을 이용하여 값을 변경하면 이 배열은 반응형 변수로서 동작하지 않습니다.

세 번째로 $:를 사용해 반응성(reactivity)을 극대화합니다.

우리가 let으로 선언한 반응형 변수의 값이 변경되면 $: 이하의 식(statement)이 실행됩니다. 당연하게도 $: 이하의 식에는 반응형 변수가 포함되어 있어야 합니다.

예를 들어 스크립트 블록의 코드가 다음과 같다고 하면

예제 코드 $:를 사용한 반응성

let a = 1;
let b = 2;
$:console.log(a, b)

변수 a 또는 b의 값이 변경되면 $: 뒤쪽의 코드가 실행됩니다. 즉, a, b 값이 바뀔 때마다 콘솔에서 a, b 값을 볼 수 있게 됩니다.

반응형 프로그래밍(reactive programming)이 처음이라면 지금은 약간 생소하거나 이해가 안 될 수도 있습니다. 차차 예제로 설명해보겠습니다.

네 번째로 스크립트 블록 안에서 $를 이용하여 스토어 변수에 쉽게 접근할 수 있습니다.

스토어(store)의 .set 연산자 없이 스토어에 값을 변경할 수 있습니다.

스토어에 대한 자세한 내용은 11장 스토어 사용하기에서 자세히 살펴보겠습니다. 우선, “스토어는 프로젝트 전체에서 공유할 수 있는 리액티브한 변수이다” 정도로 받아들이면 됩니다.