[Svelte 튜토리얼] Part 1 - Assignments

튜토리얼 링크

이번 튜토리얼은 Svelte에서 할당의 역할에 대해서 알려줍니다.

 

Svelte에서 컴포넌트의 <script> 태그 안에 선언한 변수 및 객체는 모두 반응성을 가집니다.

반응성이란 대상의 변화를 감지해 반응하여 동작하는 것을 의미합니다.

대상의 변화를 감지하려면 트리거가 발생해야 하는데, Svelte에서는 할당을 통해 트리거를 발생시킬 수 있습니다.

트리거가 발생하면 리렌더가 일어나 새로운 상태로 DOM이 업데이트됩니다.

 

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

 

<script>
  let count = 0;
  
  function increment() {
    // event handler code goes here
  }
</script>

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

 

변수 count의 반응성을 확인하기 위해 Svelte에서 클릭 이벤트를 처리하는 문법을 사용하면 다음과 같은 코드가 됩니다.

 

<script>
  let count = 0;
  
  function increment() {
    // event handler code goes here
  }
</script>

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

 

Svelte에서 Dom 이벤트를 처리하는 on:event 문법은 on:이벤트={이벤트 처리 함수}의 형태로 쓰입니다.

따라서 <button on:click={increment}>의 의미는 버튼을 클릭했을 때 increment 함수가 실행된다가 됩니다.

 

이번 튜토리얼의 목표는 버튼을 클릭했을 때 count의 값의 증가가 보이도록 하는 것입니다.

이를 위해 increment 함수에는 count 값에 1 증가한 값을 count에 할당하는 코드가 포함되어 있어야 합니다.

따라서 increment 함수에 들어갈 코드는 다음과 같습니다.

 

function increment() {
  count += 1;
}

 

이렇게 함수를 완성하면 버튼을 클릭했을 때 버튼의 내용이 바뀌는 것을 확인할 수 있습니다.

즉, 버튼을 클릭해 increment 함수가 실행되면 할당이 일어나고, 할당을 통해 트리거가 발생하면 반응성을 가지는 변수의 변화가 감지된 DOM이 업데이트되는 것입니다.