Svelte 강의 (9) - Updating arrays and objects

JS를 처음할때 배열도 let로 선언하는걸 보고 깜짝놀랐다..

 

모든걸 let으로 처리해버리는 이 편의성..

 

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

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

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

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

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

 

이 코드는 addNumber라는 함수에서 numbers라는 배열에 숫자를 1 추가한다. 추가하는 숫자는 numbers.length에 1을

 

더해서 추가하는데 스벨트에서는 push나 slice와 같은 배열 관련 함수를 사용하면 추가적인 처리가 필요하다는 것이다.

 

배열에 push를 했으면 

 

numbers = numbers; 처럼 처리해야된다는건데

 

그렇게 변경된 배열로 $: sum에서 numbers의 배열을 모두 합쳐서 출력한다.

 

 

근데 numbers = numbers보다 더 좋은 방법이

 

numbers = [...numbers, numbers.length+1];

 

이라고 말하고 있다. ...은 전개연산자인데 새로운 배열을 생성하고 이를 다시 numbers에 할당하는 방식이다.

 

 

그리고 마지막에 리액티브 선언을 사용할때 주의해야할 규칙이 나오는데

 

여기서 업데이트된 변수의 이름은 식의 왼쪽에 나타나야 한다는 것이다.

 

리액티브한 업데이트를 트리거 하려면 변수의 값을 직접 변경하는 것이 아니라 해당 변수의 참조를 변경해야되는데

 

const foo = obj.foo;
foo.bar = 'baz';

 

이 코드에서 foo 는 obj.foo의 값에 대한 참조를 가지고 있고 그 이후에 foo.bar = 'baz'로 foo의 객체에 bar 속성을 

 

변경하고 있다. 근데 이렇게 직접 변수의 속성을 변경하는 경우에는 Svelte에서는 리액티브한 업데이트가 트리거 되지

 

않는다는데. 쉽게 말하면 저렇게 직접 속성값을 변경하면 스벨트는 변경된 것을 감지 못한다는 것이다

 

그럼 어떻게해야되냐?

 

obj를 다시 할당하여 새로운 객체로 만들거나 obj.foo를 변경한 후 다시 obj를 변경하여 처리하라는데

 

obj.foo.bar = 'baz';
obj = obj;

 

이렇게..

 

개발을 스벨트로 처음 입문한다면 복잡할 수도 있는데

 

초급에게 있어 중요한 것은 구현이라고 생각한다. 고도화나 why?는 나중에 공부하면서 익히면 좋을 것이다.