Page 38 -

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

우리가 let으로 선언한 반응형 변수의 값이 변경되면 $: 이하의 식(statement)이 실행됩니다. 당
연하게도 $: 이하의 식에는 반응형 변수가 포함되어 있어야 합니다.
예를 들어 스크립트 블록의 코드가 다음과 같다고 하면

예제 코드 $:를 사용한 반응성
let a = 1;
let b = 2;
$:console.log(a, b)

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

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

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

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

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

3.2 HTML 마크업 SVELTE

HTML 마크업 영역은 별다른 블록 표시가 없습니다. <script>와 <style>의 바깥쪽에서 컴포넌트의
HTML 태그를 작성합니다. 보통은 <main>을 만들어서 코드를 작성하기도 하지만, <main>은 생략하
기도 합니다.

040