[Svelte 튜토리얼] Part 1 - Statements

 

튜토리얼 링크    

이번 튜토리얼에서는 여러 구문의 예시를 보여주며 반응형 선언(reactive declaration)의 사용법을 알려줍니다.

 

첫 번째 예시입니다.

 

<script>
  let count = 0;

  $: console.log(`the count is ${count}`);
  
  function handleClick() {
    count += 1;
  }
</script>

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

 

반응성을 가지는 변수 count가 console.log 문에 있습니다.

반응형 선언은 한 줄로 이루어진 구문에 반응성을 가지는 변수가 있을 때도 변화를 감지합니다.

따라서 버튼을 눌러 count가 변경되면 이 구문을 통해 문자열을 출력합니다. 

 

두 번째 예시입니다.

 

<script>
  let count = 0;
  
  $: {
    console.log(`the count is ${count}`);
    alert(`I SAID THE COUNT IS ${count}`);
  }
    
  function handleClick() {
    count += 1;
  }
</script>

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

 

반응성을 가지는 변수 count가 중괄호로 감싸져 있습니다.

반응형 선언은 중괄호 안에 반응성을 가지는 변수가 있을 때도 변화를 감지합니다.

그래서 반응형 선언으로 한 줄 이상의 코드도 감지하여 실행할 수 있습니다.

따라서 버튼을 눌러 count가 변경되면 이 코드 블록을 통해 문자열을 출력하고 알림 메시지를 띄웁니다.

 

마지막 예시입니다.

 

<script>
  let count = 0;
  
  $: if (count >= 10) {
    alert('count is dangerously high!');
    count = 0;
  }

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

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

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

 

반응성을 가지는 변수 count가 if 조건문에 있습니다.

반응형 선언은 if 조건문 안에 반응성을 가지는 변수가 있을 때도 변화를 감지합니다.

따라서 버튼을 눌러 count가 변경될 때마다 조건을 판별합니다.

 

튜토리얼의 답은 세 번째 예시와 같습니다.