[Document] Svelte - 2.Reactivity

 

https://yeomss.tistory.com/200?category=1011681 

[Document] Svelte - 1.Introduction

이전 글은 위의 링크를 따라가시면 됩니다.

같은 시리즈를 확인하고 싶으시다면 페이지 맨 하단의 [svelte-document] 태그를 이용해주세요.

---

 

 

 

 Assignments 

Svelte 의 강점은 state와 DOM을 동기화하는 반응성입니다. 특히 이벤트에 반응하는 기능을 예로 들 수 있습니다.

<script>
	let count = 0;

	function incrementCount() {
        count += 1
	}
</script>

<button on:click={incrementCount}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

버튼을 클릭하면 카운팅이 올라갑니다. brace curly 안에 삼항연산자도 사용할 수 있습니다.

on:eventname 으로 이벤트를 바인딩할 수 있습니다.

<button on:click="{() => count += 1}">

물론 이런식으로 바로 함수를 호출하는 것도 가능합니다.

 

 

 Declarations 

Svelte 는 자동적으로 당신이 state를 변경할 때 DOM을 업데이트 합니다.

때때로 computed 된 state가 필요로 할 떄가 있습니다.

그럴 때는 $ 달러 기호를 사용합니다.

<script>
	let count = 0;
	$: doubled = count * 2;

	function handleClick() {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

<p>{count} doubled is {doubled}</p>

반응형 선언문을 가질 수 있게 되었습니다.

물론 위와 같은 예제에서는 {count * 2}와 같이 사용할 수도 있겠지만

만약 여러 번 참조해야할 경우, 혹은 다른 반응형 값에 의존하는 값이 있을 경우 유용하게 사용할 수 있습니다.

<script>
	let count = 0;
    $: doubled = double(count);

	function incrementCount() {
        count += 1
	}

    function double(count) {
        count *= 2
        return count
    }
</script>

computed 계산에는 물론 함수도 사용할 수 있습니다.

 

 

 Statements 

Svelte 는 동적인 값을 선언하는 것에 제한을 두지 않으며, 또한 임의적인 문장도 실행시킬 수 있습니다.

예를 들면 console.log() 함수를 사용하여 로그를 찍는 것과 같습니다.

<script>
	let count = 0;
	$: console.log('the count is ' + count);

	function handleClick() {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

 

<script>
	let count = 0;
	// $: console.log('the count is ' + count);
    
	$: {
	console.log('the count is ' + count);
	alert('I SAID THE COUNT IS ' + count);
}

	function handleClick() {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

혹은 {} 를 이용하여 그룹화를 시켜 사용할 수도 있습니다.

<script>
	let count = 0;

	$: if (count >= 10) {
		alert('count is dangerously high!')
		count = 9;
	}


	function handleClick() {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

또한 $: 뒤에 조건문을 달 수도 있습니다.

 

 

 Updating arrays and objects 

Svelte의 동적 반응성은 할당에 의해 실행되므로 push 나 splice 같은 메소드 사용은 자동적으로 갱신이 되지 않습니다.

예를 들어 다음과 같은 문장은 실행이 되지 않습니다.

<script>
	let numbers = [1, 2, 3, 4];

	function addNumber() {
		numbers.push(numbers.length + 1);
	}

	$: sum = numbers.reduce((t, n) => t + n, 0);
</script>

<p>{numbers.join(' + ')} = {sum}</p>

<button on:click={addNumber}>
	Add a number
</button>

Add a number 를 누르면 계산식에 숫자가 하나씩 추가되어 총 합을 구하는 코드입니다.

하지만 버튼을 눌러도 반응하지 않습니다. 이를 고치기 위한 하나의 방법은 할당을 추가하는 것입니다.

function addNumber() {
	numbers.push(numbers.length + 1);
	numbers = numbers;
}

그러나 spread 연산을 사용하여 더 자연스럽게 바꿀 수 있습니다.

function addNumber() {
	numbers = [...numbers, numbers.length + 1];
}

function addNumber() {
	numbers[numbers.length] = numbers.length + 1;
}

인덱스를 이용하여 요소를 할당하는 것 또한 잘 작동합니다.

 

 

 

 

 

 

 

 

 

 

#스벨트 도큐먼트 #svelte document #svelte 할당 #svelte 이벤트 #svelte 바인딩

---