[Svelte]리액티브 구문(Reactive statements)

리액티브 구문(Reactive statements)

리액티브 구문은 JavaScript 문법을 특별하게 다루는 스벨트의 기능이며, 리액티브 구문에서 참조하고 있는 변수 중 어떤 것이라도 그 값이 바뀌면 실행됩니다.

 

다음 예제는 + 버튼을 클릭하면 상태 num의 값이 1 증가하고, - 버튼을 클릭하면 1 감소합니다. 리액티브 구문을 사용하여 상태 num의 값이 변경될 때마다 num의 값을 콘솔에 출력합니다.

<script>
  let num = 0;
  $: console.log(`num: ${num}`);
</script>

<div>
  <h1>{num}</h1>
  <button on:click={() => num++}>+</button>
  <button on:click={() => num--}>-</button>
</div>

<style>
div {
  text-align: center;
}
</style>

[실행 결과]

Chrome 개발자 도구의 콘솔 창에서 상태 num의 값이 변경될 때마다 콘솔에 출력되는 것을 확인할 수 있습니다.

스벨트의 $: 
스벨트는 JavaScript의 레이블( : )을 사용하여 상태 종속성을 기반으로 상태가 변경되면 즉시 실행할 수 있는 코드 블록을 작성할 수 있습니다. 즉, 스벨트에서 $: 이후에 작성되는 코드는 리액티브 구문으로 코드에 사용된 상태가 변경되면 즉시 실행됩니다.

다음 예제는 상태 num의 값이 변경되면, 상태 doubleNum의 값을 num * 2로 할당합니다.

<script>
  let num = 0;
  let doubleNum = num;
  $: doubleNum = num * 2;
</script>

<div>
  <h1>num: {num}</h1>
  <h1>doubleNum: {doubleNum}</h1>
  <button on:click={() => num++}>+</button>
  <button on:click={() => num--}>-</button>
</div>

<style>
div {
  text-align: center;
}
</style>

[실행 결과]

리액티브 구문에는 코드 블록을 사용하여 코드를 그룹화할 수 있습니다. 다음 예제는 상태 num의 값이 변경되면, doubleNum의 값을 콘솔에 출력합니다.

<script>
  let num = 0;
  let doubleNum = num;
  $: {
    console.log(`변경 전: ${doubleNum}`);
    doubleNum = num * 2;
    console.log(`변경 후: ${doubleNum}`);
  }
</script>

<div>
  <h1>num: {num}</h1>
  <h1>doubleNum: {doubleNum}</h1>
  <button on:click={() => num++}>+</button>
  <button on:click={() => num--}>-</button>
</div>

<style>
div {
  text-align: center;
}
</style>

[실행 결과]

리액티브 구문에는 조건문을 사용할 수 있습니다. 다음 예제는 리액티브 구문에 if 조건문을 사용하여 상태 num의 값이 홀수인 경우 상태 doubleNum의 값을 변경합니다.

<script>
  let num = 0;
  let doubleNum = num;
  $: if(num % 2 !== 0) {
    doubleNum = num * 2;
  }
</script>

<div>
  <h1>num: {num}</h1>
  <h1>doubleNum: {doubleNum}</h1>
  <button on:click={() => num++}>+</button>
  <button on:click={() => num--}>-</button>
</div>

<style>
div {
  text-align: center;
}
</style>

[실행 결과]

상태 num의 값이 6인 경우 짝수이므로 상태 doubleNum의 값이 변경되지 않습니다.

---

잘못된 방법

위에서 설명했듯이 스벨트의 리액티브 구문은 상태 종속성을 기반으로 동작합니다.

 

다음 예제처럼 리액티브 구문에서 상태 종속성이 잘못된 경우 컴파일되지 않습니다.

<script>
  let a = 10;
  let b = 10;
  $: a = b + 10;
  $: b = a + 10;
</script>

<div>
  <h1>a: {a}</h1>
  <h1>b: {b}</h1>
  <button on:click={() => {
    a++;
  }}>Click</button>
</div>

<style>
div {
  text-align: center;
}
</style>

[에러 내용]

만약 위 코드가 정상적으로 실행된다면...

 

a가 변경됨 → b가 변경됨 → a가 변경됨 → b가 변경됨 → ...

 

리액티브 구문에 의해 상태가 계속해서 변경되는 문제가 발생합니다. 따라서, 리액티브 구문의 순서와 상태 종속성이 잘못되지 않았는지 주의하도록 합니다.