Svelte에서 on:click과 같은 이벤트에 인수를 전달하는 방법

Svelte events은 Svelte의 구성 요소에 상호 작용을 추가하는 방법입니다. Svelte 이벤트의 일반적인 문제는 내부에서 호출되는 함수에 인수를 추가하는 것입니다. 예를 들어 사용자가 클릭할 때마다 증가하는 기본 카운터가 있다고 가정합니다.

<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" on:click={addToCounter}>{x}</button>

이것은 잘 작동하지만 클릭할 때마다 일정량만큼 카운터를 증가시키도록 변경하고 싶다고 가정해 보겠습니다. 코드를 다음과 같이 변경해 볼 수 있습니다.

<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(amount) {
        x += amount;
    }
</script>

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

그러나 이것은 작동하지 않습니다. 대신 함수를 포함하도록 이벤트를 변경해야 합니다. addToCounter 함수에 인수를 추가하려면 대신 다음과 같이 해야 합니다.

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

여기에서 addToCounter 에 의해 생성된 값을 반환하는 함수를 호출합니다. 이는 이벤트에도 적용되므로 이벤트 또는 e 객체를 함수에 전달하려는 경우 다음과 같이 할 수 있습니다.

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