5.6 배열의 변화 감지하기
배열은 자기 자신을 제어하는 메서드들(slice, pop, push, filter 등)이 있어서, 그 메서드를 통해서 배열을 변경하면 스벨트는 알아차릴 수 없습니다. 센서가 감지하지 못하는 것입니다. 따라서 메서드 호출에 의해 변경된 결과를 할당 연산자 =을 사용해 강제로 할당해야 합니다.
강제로 할당한다는 이야기가 어렵거나 생소하게 느껴지겠지만 조금 특이할 뿐입니다. 예제를 통해서 찬찬히 살펴보면 어려운 내용은 아니니 걱정하지 않아도 됩니다.
배열에 값들을 변화시키고 $:가 감지한 뒤 그에 따른 동작 코드가 정상적으로 호출되는지 확인해보겠습니다.
svelte.dev 웹 사이트에서 새로운 REPL을 열고 기존 내용을 모두 삭제한 뒤 코드를 작성합니다.
REPL의 App.svelte
<script>
// 배열 선언 후 할당
let colors = ["빨강", "주황", "노랑", "초록"];
// 센서의 감지와 그에 따라 동작(reactive statements)할 코드
$: console.log("log.1: ", colors);
function assignment() {
colors.pop(); // 배열의 색상을 한 개 지움
console.log("log.2: ", colors); // 지워진 상태를 콘솔에 출력
}
</script>
<p>{colors.join(", ")} 모두 {colors.length} 개의 색이 있습니다.</p>
<button on:click={assignment}>할당</button>