svelte 스터디#3 Reactivity

mhlee·2023년 2월 24일
0

svelte

목록 보기
3/6

Assignments

버튼에 이벤트 핸들러를 연결하고, 변경된 값을 html에 다시 표현하는 예제이다.
역시 간다하다.

<script>
	let count = 0;

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

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

Declations

첫번째 예제와 비슷하다.
doubled 라는 변수가 count 값이 변경되면서 같이 변경된다.
이때, 간접적으로 변경된 변수도 반응성을 보이려면 $: 문법을 사용해서 변수를 선언해야 한다.

<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>

Statements

반응형 값을 선언하는데 제한이 없다고 한다.
성능상으로 문제가 없으니 이렇게 단언하는게 아닐까 싶다.
특이한건 명령(아래 예시에서 if 문)문에서도 반응형 값을 사용한다.

일단 바로 받아들여 지지는 않지만, script 블럭에서 미리 이러할때 이렇게 한다라고 정의하고,
런타임중 그 컨디션이 되면 실행되어진다 정도 이해하고 넘어가려 한다.

<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

반응성은 재할당에 의해서 트리거 된다고 설명한다.
즉, 배열의 멤버를 추가,삭제,변경하는것은 트리거가 되지 않는다.
오브젝트 역시 마찮가지다.
오래전에 vue 공부할때 비슷한 내용이 있었는데, 그때는 이해가 안됐는데 쉽게 이해된다.
반응성은 재할당!!!

아래 예제에서 1번은 반응성이 없다.
하지만, 2번은 멤버가 추가되고 다시 할당 되었기 때문에 반응성이 있다.
ES6의 spread 문법을 사용하면 좀더 간결하게 표현할수 있다고 설명한다.

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

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

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

또한, 배열이나 오브젝트에 속성에 대한 직접 할당도 반응성을 가진다고 설명한다.
아래 예제에서 addNumber2가 그에 대한 예시이다.

마지막으로, 간단하게 설명하면 업데이트된 변수가 직접 왼쪽에 나타나면 반응성을 가진다고 설명한다.

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

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


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

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

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

<button on:click={addNumber2}>
	Add a number
</button>
profile
삽질하는 개발자

0개의 댓글