Svelte에서 이벤트 시작하기

Svelte의 이벤트는 매우 직관적이고 사용하기 쉽습니다. 이 가이드에서는 Svelte 이벤트를 시작하는 방법을 살펴보겠습니다. 이 안내서는 Javascript에 대해 잘 이해하고 있다고 가정합니다. Svelte를 처음 사용하는 경우 시작하기 전에 제 가이드creating your first Svelte application를 읽는 것이 좋습니다.

Svelte의 이벤트

Svelte에서 새 구성 요소를 생성할 때 일반적으로 사용자가 구성 요소와 상호 작용할 때 특정 작업(예: 구성 요소 위로 마우스를 가져가거나 클릭)을 수행하기를 원합니다. Svelte는 일반적으로 바닐라 자바스크립트에서 찾을 수 있는 모든 이벤트를 허용합니다. For more on Javascript events, click here .

기본 예제부터 시작하겠습니다. 아래 구성 요소는 creating Svelte components에 대한 내 기사에서 가져온 것으로 간단한 카운터를 만듭니다.

<script>
    // we write export let to say that this is a property
    // that means we can change it later!
    let x = 0;
    const addToCounter = function() {
        ++x;
    }
</script>

<button id="counter">{x}</button>

사용자가 버튼을 클릭할 때마다 addToCounter가 실행되고 x 1씩 증가하여 버튼 자체에 표시됩니다. 이를 위해 이벤트를 추가합니다. 다음은 사용자가 버튼을 클릭할 때 추가해야 하는 이벤트입니다.

<button id="counter" on:click={addToCounter}>{x}</button>

Svelte에서 {}를 사용하여 이 속성의 값이 Javascript임을 나타냅니다. 모든 유효한 Javascript 이벤트를 click 대신 사용할 수 있습니다. 예를 들어, 아래는 마우스가 button 위로 움직일 때마다 카운터를 증가시킵니다.

<button id="counter" on:mouseover={addToCounter}>{x}</button>

마찬가지로 click , scroll , hover , mouseup , pointerup , pointerdown , mousedown 등과 같은 다른 Javascript 이벤트를 사용할 수 있습니다. 이들은 단지 예일 뿐이지만 원하는 모든 Javascript 이벤트 사용하여 사용할 수 있습니다.

Svelte 이벤트에서 이벤트 데이터에 액세스

때로는 사용자가 구성 요소와 상호 작용할 때 e 또는 event 데이터에 액세스하려고 합니다. event 개체는 발생한 이벤트에 대한 많은 유용한 정보를 전달합니다. 그렇게 하려면 핸들러를 함수로 변경하기만 하면 됩니다.

예를 들어 버튼의 클릭 위치를 검색하여 이번에는 사용자에게 표시해 보겠습니다.

<script>
    // we write export let to say that this is a property
    // that means we can change it later!
    let x = 0;
    let click = [0, 0]

    const addToCounter = function(e) {
        click[0] = e.clientX;
        click[1] = e.clientY;
        ++x;
    }
</script>

<button id="counter" on:click={(e) => { addToCounter(e) }}>
    Clicked {x} times, last at {click[0]}, {click[1]}
</button>

여기에서 e.clientX 및 e.clientY를 변수에 저장하고 버튼을 클릭할 때마다 사용자에게 표시합니다. 모르는 사람들을 위해 e.clientX 및 e.clientY 둘 다 이벤트가 발생했을 때 커서 위치의 측면을 나타냅니다. Svelte는 당연히 reactive 이므로 버튼을 클릭할 때마다 최신 데이터로 자동 업데이트됩니다.

Svelte 이벤트 전달

이벤트 전달은 사용자가 상위 구성 요소에서 처리하려는 하위 구성 요소에서 이벤트를 트리거할 때마다 발생합니다. 본질적으로 이 구성 요소는 특정 이벤트를 가질 수 있지만 여기서는 처리되지 않는다는 의미입니다. 이전 예제를 보면 먼저 자식 구성 요소에서 전달할 수 있는 이벤트를 설정하여 이벤트 전달을 설정할 수 있습니다. 아래와 같은 Comp.svelte라는 파일에 구성 요소를 생성한다고 가정해 보겠습니다. 한 버튼은 클릭할 수 있고 다른 버튼은 클릭할 수 없습니다.

<button on:click>
    Click me, I am a button
</button>
<button>
    I am unclickable. Ignore me.
</button>

여기서는 첫 번째 버튼에 유효한on:click 이벤트가 있음을 의미합니다. 위쪽으로 전달할 수 있는 유효한 이벤트가 있는 구성 요소 내의 특정 요소를 정의할 수 있기 때문에 유용합니다. 그러면 부모에서 다음과 같이 버튼을 가져올 수 있습니다.

<script>
    import Comp from './Comp.svelte';

    let x = 0;
    const addToCounter = () => {
        ++x;
    }
</script>

<Comp on:click={addToCounter} />

이제 사용자가 button 내의 첫 번째 Comp를 클릭하면 on:click 이벤트가 발생하고 addToCounter 함수가 실행됩니다. on:click에서 Comp.svelte를 완전히 제거하면 Comp 구성 요소에서 on:click를 정의하더라도 이벤트가 트리거되지 않습니다. 즉, 자식에 이벤트가 연결되어야 한다고 정의할 수 있을 뿐만 아니라 이벤트를 자식 구성 요소 자체에 추가하여 해당 이벤트가 있는 특정 요소를 정의할 수도 있습니다. 이것은 우리에게 많은 유연성을 제공합니다.

마지막 생각들

Svelte 이벤트는 사용하기 쉽고 바닐라 자바스크립트 이벤트와 동일한 명명 규칙을 따르기 때문에 사용이 매우 간단합니다. 이 가이드에서는 시작할 수 있도록 기본 사항을 다뤘습니다. For more Svelte content, try my other articles here