[Svelte 튜토리얼] Part 1 - Declarations

튜토리얼 링크

이번 튜토리얼에서는 반응형 변수에 의존해 함께 업데이트가 되도록하는 반응형 선언(reactive declaration)에 대해서 알려줍니다.

 

Svelte는 $: 변수가 포함된 구문의 형태로 반응형 선언을 지원합니다.

이 형태는 순수 Javascript label 문법으로, 새로운 변수를 선언하는 구문을 쓸 때 let을 사용하지 않는 것에 주의해야합니다.

 

튜토리얼에 주어진 코드는 다음과 같습니다.

 

<script>
  let count = 0;

  function handleClick() {
    count += 1;
  }
</script>

<button on:click={handleClick}>
  Clicked {count}
  {count === 1 ? 'time' : 'times'}
</button>

 

이번 튜토리얼의 목표는 다음과 같이 반응형으로 동작하는 문자열이 나타나도록 구현하는 것입니다.

이를 구현하기 위해서 다음과 같이 코드를 작성할 수도 있습니다.

 

<script>
  let count = 0;
  let doubled = 0;

  function handleClick() {
    count += 1;
    doubled += 2;
  }
</script>

<button on:click={handleClick}>
  Clicked {count}
  {count === 1 ? 'time' : 'times'}
</button>

<p>{count} doubled is {doubled}</p>

 

하지만, doubled 값은 count 값에 항상 의존적이기 때문에 count의 초기값이 바뀌면 doubled의 초기값도 변경해주어야 합니다.

즉, 다른 목적으로 코드를 변경할 때 유연하게 대처하지 못합니다. 따라서 반응형 선언을 사용해 구현해야 합니다.

반응형 선언을 사용해 구현한 튜토리얼의 답은 다음과 같습니다.

 

<script>
  let count = 0;
  $: doubled = count * 2;

  function handleClick() {
    count += 1;
  }
</script>

<button on:click={handleClick}>
  Clicked {count}
  {count === 1 ? 'time' : 'times'}
</button>

<p>{count} doubled is {doubled}</p>