[Svelte Tutorial]5. Events

이진규·2023년 5월 3일

JavaScript svelte

Svelte Tutorial

목록 보기

5/7

5. Events

Svelte에서 Event를 어떻게 사용할 수 있는지 알아봅니다.

5-1. DOM Events (DOM에 이벤트 핸들러 추가하기)

앞에서 얘기했듯 on:을 통해 이벤트를 처리할 수 있습니니다.

<script>
  let m = { x : 0, y : 0 };
  function handleMousemove(event){
    m.x = event.clientX;
    m.y = event.clientY;
  }
</script>
<div on:mousemove={handleMousemove}>
  The mouse position is {m.x} x {m.y}
</div>

on:뒤에 HTML Element에 추가하고 싶은 이벤트 핸들러의 이름을 지정해주고 함수를 넣어줍니다.

5-2. Inline Handlers

5-1의 예제의 함수를 inline에서도 적용할 수 있습니다.

<div on:mousemove={(event) => m = {x : event.clientX, y : event.clientY}}>
  The mouse position is {m.x} x {m.y}
</div>

보통 Inline에서 이벤트 핸들러를 사용하는 것을 지양하는데, Svelte는 컴파일러가 항상 잘 작동되도록 해줍니다.

5-3. Event modifiers

이벤트 핸들러는 once같은 Modifiers(수식어)를 가질 수 있습니다.

<button on:click|once={handleClick}>
  Click me
</button>

이벤트 핸들러 뒤에 |수식어를 붙여서 사용합니다. ex) on:핸들러|수식어
여러 개의 수식어를 이어서 사용할 수 있습니다. ex) on:핸들러|수식어1|수식어2...={함수}
다음은 modifier의 종류입니다.

preventDefault: 이벤트 핸들러 실행 전에 e.preventDefault()를 실행합니다.
stopPropagation: e.stopPropagation()을 실행해서 이벤트 버블링을 막아줍니다.
passive: 터치/휠 이벤트의 performance를 향상시켜줍니다.
nopassive: passive를 작동하지 않습니다.
capture: 이벤트 핸들러를 bubbling 단계가 아닌 capturing 단계에서 실행합니다.
once: 핸들러를 처음 실행하고 핸들러를 제거합니다.
self: event.target이 자신일 때에만 핸들러를 실행합니다.
trusted: event.isTrusted가 true일 때에만 핸들러를 실행합니다.

5-4. Component events

컴포넌트에서 event를 dispatcher를 통해 보낼 수 있습니다.

// App.svelte
<script>
  import Inner from './Inner.svelte';
  function handleMessage(event){
    alert(event.detail.text);
  }
</script>
<Inner on:message={handleMesssage}/>
// Inner.svelte
<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();
  function sayHello(){
    dispatch('message', {
      text: 'Hello!'
    });
  }
</script>
<button on:click={sayHello}>
  Click to say hello
</button>

App 컴포넌트는 <Inner on:message={handleMessage}/>에서 on:message를 통해 Inner 컴포넌트에서 보내는 메세지를 듣고 있습니다.
이렇게 듣고있지 않는다면 Inner컴포넌트에서 dispatch를 통해 메세지를 보내더라도 App 컴포넌트에서 반응할 수 없습니다.

5-5. Event forwarding

DOM 이벤트와 달리 컴포넌트 이벤트는 버블링되지 않습니다.

<App>
  <Outer>
    <Inner />
  </Outer>
</App>

위의 구조로 되어있을 때, dispatch로 Outer -> Inner로 보내진 이벤트는 버블링이 일어나지 않고 그대로 끝나게 됩니다.
이를 해결하기 위해 Outer에서도 dispatch를 둬서 Inner에서 받은 이벤트를 App으로 보내주어야 합니다.
하지만 이렇게 해결하면 코드가 너무 길어지므로 Svelte에서는 <Inner on:message/> 이렇게 on:message의 값을 할당하지 않고 비워두면 '모든 message 이벤트를 forward한다.' 라는 의미를 갖게 했고 이를 이벤트 포워딩이라 합니다.

5-6. DOM Event forwarding

이벤트 포워딩은 DOM 이벤트에서도 작동합니다.

// App.svelte
...
<CustomButton on:click={handleClick}/>
// CustomButton.svelte
<button> Click me </button>
<style> 
  ...
</style

여기에서도 컴포넌트는 버블링이 일어나지 않으므로 CustomButton 컴포넌트에서 발생한 button onclick 이벤트는 App으로 버블링되지 않습니다.
<button on:click> Click me </button> 이벤트 포워딩을 통해 CustomButton컴포넌트에서 발생한 onlclick 이벤트를 App에서 받을 수 있습니다.