svelte 5 rune - $derived

$derived

count라는 변수의 두 배의 값을 가지는 doubled라는 변수가 있을 때, count 값이 바뀌면 doubled 값도 같이 바뀌게 해보자.

기존에는

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

</script>
{doubled}
<button on:click={() => {count++;}}>
+
</button>

와 같이 사용한다.

그런데

($derived() 안에있는 식은(count++ 같은) 상태 변화를 유발하지 않음)
라고 하는데, playground에서 해봤을 땐 작동이 안됐다.
버근가

$derived.by

$derived는 파라미터로 식을 받지만, $derived.by는 파라미터로 콜백함수를 받는다.
예를 들어,

let numbers = $state([1,2,3]);
let sum = $derived.by(() => {
	let sum = 0;
  	numbers.forEach(number => sum += number);
  	return sum;//콜백함수의 리턴값을 가짐!
})//6

과 같이 사용할 수 있다.

$: 과의 차이점

preview docs에 나온 내용은 다음과 같다.

$: double = count * 2와 let double = $derived(count * 2)에는 몇가지 차이점이 있다.

• count가 업데이트 하면 $:는 Svelte가 DOM을 업데이트하기 전까지 double이 업데이트되지 않지만, $derived를 사용하면 count가 업데이트 되었을 때 즉시 업데이트된다.
• none-runes 모드에서 double을 다음과 같이 선언하면,

const doubleCount = () => count * 2;
$: double = doubleCount();

count가 업데이트되어도 double은 업데이트되지 않지만,
runes 모드에서 $derived를 사용하여

const doubleCount = () => count * 2;
let double = $derived(doubleCount());

와 같이 사용하면 업데이트된다.

• non-runes 모드에서는

let count = 0;
$: triple = double + count;
$: double = count * 2;

double이 먼저 계산되지만,
runes 모드에서는

let count = $state(0);
let triple = $derived(double + count);
let double = $derived(count * 2);

triple은 double이 선언되기 전에는 참조할 수 없다.
(근데 왜 playground에서 되냐)