[Svelte]상태와 이벤트(state and event)

상태(state)

다음 예제처럼 script 태그 내부에서 상위에 선언되는 변수들 중 HTML 요소가 참조하는 변수들은 컴포넌트의 상태(state)라고 말합니다. 상태는(state)는 특정 이벤트가 동작함에 따라 값이 변경될 수 있으며, 화면에 표시되는 값이 달라질 수 있습니다.

[App.svelte]

<script>
  // num은 h1 태그에서 사용되므로 상태(state)입니다.
  let num = 0;
	
  function increment() {
    num++;
  } 

  function decrement() {
    num--;
  }
</script>

<div>
  <h1>{num}</h1>
  <button on:click={increment}>+</button>
  <button on:click={decrement}>-</button>
</div>

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

script 태그 내부 상위에 선언된 변수 num은 h1 태그에서 사용되므로 상태(state)입니다. + 버튼을 클릭하면 num의 값이 1 증가하고 - 버튼을 클릭하면 num의 값이 1 감소합니다.

상태를 html 영역에서 사용하기 위해서는 중괄호( { } ) 사이에 상태명을 작성하면 되고 상태의 값을 변경하기 위해서는 이벤트 핸들러 함수에서 상태의 값을 변경합니다.

---

이벤트(event)

스벨트에서 이벤트 핸들러 함수를 정의하는 방법은 두 가지입니다. 첫 번째 방법으로 script 태그 내에 함수를 정의하거나 두 번째 방법으로 html 태그 내에 함수를 정의합니다.

 

상태(state)에서 사용된 예제는 script 태그 내에 함수를 정의하였습니다. 다음 예제는 HTML 요소 중 하나인 button 태그에 이벤트 핸들러 함수를 정의합니다.

[App.svelte]

<script>
  let num = 0;
</script>

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

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

script 태그 내에 함수를 정의하는 방법과 똑같이 동작하지만, 코드가 지저분해 보인다는 단점이 존재합니다.

 

다음 예제처럼 ES6에서 지원하는 화살표 함수를 사용하면 코드를 더 간결하게 작성할 수 있습니다.

[App.svelte]

<script>
  let num = 0;
</script>

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

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

즉, 버튼을 클릭하거나 키보드에서 값을 입력하는 이벤트에서 상태의 값을 변경해야 하는 경우 이벤트를 처리하는 함수가 필요합니다. 이벤트를 처리하는 함수를 이벤트 핸들러 함수라고 말합니다.

 

스벨트에서 이벤트 핸들러 함수는 script 태그 내에 정의하거나 HTML 요소 내에 정의할 수 있습니다.