[SVELTE] bind:group & this

bind:group & this

Bind:group

bind:group 문법은 type="radio" 혹은 type="checkbox" 의 인풋에서 요긴하게 사용되는 예약어이다.

아래의 코드에서 보다시피 radio 버튼에 group을 설정하게 되면, 버튼이 클릭되었을 때, 해당 value가 변수에 할당되게 된다.

Checkbox는 다중 선택이 가능하기 때문에, 이를 bind:group으로 설정하면 체크되어 있는 input의 value가 배열에 저장되게 된다.

<script>
    let tortilla = 'Plain';
    let fillings = [];
</script>

<!-- grouped radio inputs are mutually exclusive -->
<input type="radio" bind:group={tortilla} value="Plain">
<input type="radio" bind:group={tortilla} value="Whole wheat">
<input type="radio" bind:group={tortilla} value="Spinach">

<!-- grouped checkbox inputs populate an array -->
<input type="checkbox" bind:group={fillings} value="Rice">
<input type="checkbox" bind:group={fillings} value="Beans">
<input type="checkbox" bind:group={fillings} value="Cheese">
<input type="checkbox" bind:group={fillings} value="Guac (extra)">

bind:this

bind:this는 특정 돔 노드를 변수에 할당하는 역할을 한다. 다만, 렌더링 이후에, 노드 요소가 변수에 할당되기 때문에, 사용시 주의를 필요로 한다.

<script>
    import { onMount } from 'svelte';

    let canvasElement;

    onMount(() => {
        const ctx = canvasElement.getContext('2d');
        drawStuff(ctx);
    });
</script>

<canvas bind:this={canvasElement}></canvas>

#svelte