[Svelte] state와 반응형 선언(Reactive Declaration) $

이번 포스팅에서는 Svelte의 state와 반응형 선언에 대해 알아보겠습니다.

 

1. state 선언하기

Svelte에서 state를 선언할 때는 아래와 같이 간단하게 선언합니다.

let count = 0;

자바스크립트 일반 변수를 만들듯이 선언하지만, 리액티브하게 동작하는 엄연한 state입니다.

그래서 message의 값이 변하면 HTML 템플릿에서도 바로바로 반영이 됩니다.

 

 

2. 반응형 변수

반응형 변수란 state값이 변할 때마다 이를 자동 감지하여 함께 변경되는 변수입니다.

달러($) 표시를 통해 선언하며, let이나 const 같은 키워드는 사용하지 않습니다.

$: double = count * 2;

double이라는 반응형 변수를 선언했습니다. 이 변수는 count라는 state의 값이 변할 때마다 자동적으로 count에 2를 곱한 값이 저장됩니다.

 

 

3. 반응형 그룹

let name = "world";
let count = 0;

$: {
    console.log(name + " " + count);
}

function onClick() {
    name = "hello";
    count++;
}

중괄호 안에서 참조된 변수의 값이 변하면 중괄호 안에 있는 전체 코드가 실행되는 반응형 그룹을 선언한 코드입니다.

 

현재 4번째 라인의 중괄호 안에서 name과 count라는 state의 값이 참조되고 있는데요, 이 두 가지의 state 중 하나의 값만 변해도 중괄호 안에 있는 전체 코드가 실행되어 로그가 찍힙니다.

 

 

그렇다면 참조되고 있지 않은 변수의 값이 변할 때 코드를 실행할 방법은 없는 걸까요?

예를 들어, 코드는 count만을 참조하고 있지만 name이 변할 때만 코드를 실행하고 싶을 수도 있을 겁니다.

그럴 때는 다음과 같이 합니다.

 

(방법 1)

function show(name) {
    console.log(count);
}

$: show(name);

 

(방법 2)

function show(name) {
    console.log(count);
}

$: show(), [name];

 

 

4. 반응형 조건 그룹

반응형 조건 그룹이란 미리 설정해 놓은 조건에 맞을 때만 코드를 실행하도록 하는 반응형 그룹입니다. 아래와 같이 선언합니다.

$: if (count % 2 === 0) {
    console.log("짝수");
}

위의 코드는 count가 짝수일 때만 로그를 찍도록 하였습니다.

 

 

---

여기까지 Svelte의 state와 반응형 선언($)에 대해 알아봤습니다. 읽어주셔서 감사합니다.

음..... 뭐라고 끝내야되지... 오늘은 월요일이죠... 이번 한주도 힘내봅시다.