svelte 5 rune

9월 20일 svlete 5 중요한 변경사항 공지

기존 코드 작성 시 에 대한 업데이트

<script>
let var ;

$: var2 ; 

onMount(()=> {})
</script>

<Child {$$restProps} />

rune - $state, $derived, $effect, $props

$state

스벨트에서는

<script>
	let count = 0;

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

<button on:click={increment}>
	clicks: {count}
</button>

의 코드와 같이 간단하게 연결시킬 수 있지만, 작동하는 방식에서 좀더 나은 형식을 위한 $state 문 추가.

<script>
	let count = $state(0);

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

<button on:click={increment}>
	clicks: {count}
</button>

어떻게 보면 리액트의 useStste와 흡사 한 느낌.

기존에서는 최상위가 아닌 요소에 캡슐화 function, 객체 등 재사용을 위해서는 store 등 상태 관리 를 써야 함.

<script>
import { writable } from 'svelte/store';

export function createCounter() {
	const { subscribe, update } = writable(0);

	return {
		subscribe,
		increment: () => update((n) => n + 1)
	};
}
</script>


<script>
	import { createCounter } from './counter.js';

	const counter = createCounter();
</script>

<button on:click={counter.increment}>
	clicks: {$counter}
</button>

하나의 변동 사항으로 인해 더 한단계이상을 거쳐야 하는 문제를 추가함

get, set 추가

<script>
export function createCounter() {
	let count = $state(0);

	return {
		get count() { return count },
		increment: () => count += 1
   };
}
</script>

<script>
	import { createCounter } from './counter.js';

	const counter = createCounter();
</script>

<button on:click={counter.increment}>
	clicks: {counter.count}
</button>

런타임 반응성

$: 종속성이 변경 됨을 확인 할 때 사용

<script>
	export let width;
	export let height;

	// the compiler knows it should recalculate `area`
	// when either `width` or `height` change...
	$: area = width * height;

	// ...and that it should log the value of `area`
	// when _it_ changes
	$: console.log(area);
</script>

초기 값에 대한 연결성 부족으로 업데이트 부분의 복잡성이 늘어남을 해결

<script>
	let {widht, height} = $props();
    
    const area = $derived(width *height);
    
    $effect(()=> {
    	console.log(area);
    })
</script>

$derived

기존의 $: 문법에 대한 대체$:는 초기값 업데이트를 알수 없는 현상 해결
기존에는 최상위 요소가 아닐시 재사용하기 힘든 문제 해결

기존

<script>
	let raduis = 0;
	$: area = Math.PI * radius ** 2;
</script>

업데이트

<script>
	let raduis = $state(0);
    
    let area = $derived(areaRadius);
    
    const areaRadius = () => {
    	return Math.PI * radius ** 2
    }
</script>

$effect

onMount(), $: 문법의 업데이트
onMount 될 때 찾아야 하는 변수, dom 에 대한 확인

$: 에서 대응하기 힘들었던 부분 해결
리액트의 useEffect()의 느낌

이전

<script>
  let value = '';
  let number = 0;

  onMount(() => {
      $: number = 0;
  }) 

  $: if(value) {
      console.log(value);
  }
</script>

업데이트

<script>
  let value = $state('');

 $effect(() => {
  	let number = 0;
    
    console.log(value);
 })
</script>

$props

기존의 하위 요소나 가져올 변수의 값을 spread 문법으로 추가

예시

<script>

export let text = ''; -> let {text = ''} = $props();

</script>

rune의 사용으로 기존 개념의 대체 될 요소

1. 최상위 요소의 let 연결
2. export let
3. $: 의 단점 해결
5. store의 복잡성 해결
6. $ store prefix
7. $props and $restProps
8. lifecicle function: onMount-> $effect()

출처
https://www.youtube.com/watch?v=RVnxF3j3N8U&t=635s

https://www.youtube.com/watch?v=TOTUXiYZhf4&t=30s

https://svelte.dev/blog/runes

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACqtWSsvMSS1WsoquVspLzE1VslJyLChQ0lEqqSwAcYrLUnNKUoH84vzSomSQiE1xclFmQYldTF5MSU5qiQJIl4Ktgnp5flFOirp1TJ6NPkJFnk2GoZ1Hak5OvkI1SGGtjT5QICZPqTa2FgDzyDZzewAAAA==