TIL: Svelte | 반응성 구문 - 221205

반응성 구문

reactivity 라고 작성된 것을 한글로 반응성이라고 해석한 것 같다
자바스크립트의 label과 같다고 한다 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label

스벨트 구문을 그냥 작성하게 되면 1번만 실행되고
event를 통해서만 동적으로 변수를 다룰 수 있다

반응성 구문 $: 을 사용하면
구문 내에 반응성을 갖는 (동적인) 변수가 포함되어 있을 경우
참조된 값이 변경될 때마다 해당 구문을 다시 실행하라는 의미

useEffect deps에 변수를 넣는 것과 비슷한 늬앙스로
해당 변수에 의존하는 코드를 만들 때 사용
반응 선언을 사용하여 변수를 서로 동기화 상태로 유지할 수 있다

{} 블록을 선언하여 여러 반응성 코드를 추가할 수도 있고
if 제어문을 사용할 수 있다

반응성 구문을 선언하는 것에는 제한이 없다

사용

<script>
	let count = 0;
	$: doubled = count * 2;
	$: if (count %  2 === 0) {
		console.log(count)
      	console.log(doubled)
	}
	
	function handleClick() {
		count += 1;
	}
</script>

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

일반 변수를 count 를 통해 반응성을 갖는 doubled 변수 정의
count를 통해 반응성을 갖는 console.log() 구문을 정의
count가 변하면 doubled의 값도 변하고, console.log() 가 찍힌다
이 때 doubled 에는 var, let, const 키워드를 사용하지 않는다.

반응성 할당

스벨트의 반응성은 할당으로 트리거를 주지 않으면
배열이나 객체를 직접 업데이트 하지 않는다
때문에 함수나 메소드가 자체적으로 불변성을 갖게 된다
기존의 배열/객체를 변경하기 위해서는
함수 내부에서 기존 변수에 변경된 배열 혹은 객체를 할당해주어야 한다

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

	function addNumber() {
		numbers.push(numbers.length + 1);
		numbers = numbers // 반응성 할당
	}

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

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

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

위 예제에서 numbers = numbers 구문을 생략한다면
numbers 배열은 변경되지 않는다

sum은 반응성 구문으로 numbers가 변경되면 자신도 함께 변경되는 변수이기 때문에
numbers의 변화에 따라 함께 변경된다

addNumber 함수는 ES6 스프레드 문법을 사용할 수 있다

let numbers = [1, 2, 3, 4];

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

그치만 스프레드 문법에서 배열을 복사하는 것은 불변성을 유지하기 위해
어느정도 비효율을 감수하더라도 깊은 복사를 하는 것인데
이걸 또 굳이 기존의 배열을 변경하면서 사용하는 것이 무슨 의미가 있나 싶다..

아무튼 이와 같은 규칙들이 배열을 직접 수정하는 pop() 이나 shift() 등 메소드에도 적용된다

let numbers = [1, 2, 3, 4];

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

참조를 통해 외부 변수의 배열에 직접 접근하여 값을 변경할 수 있다

<script>
	const obj = {foo: {bar: 'bar'}}
	console.log(obj)
	function quox(thing) {
	thing.foo.bar = 'baz';
	}
	quox(obj);
	console.log(obj)
</script>

참조를 통해 외부 변수의 객체 또한 직접 접근하여 변경할 수 있다