Svelte5

Rune 문법

• Svelte5의 반응성 관리를 위한 키워드
• 기존 문법에 비해 더 명시적인 문법을 제공
• rune 문법
  • $state
  • $derived
  • $effect
  • $props
  • $bindable
  • $inspect
  • $host

$state

• 컴포넌트에서 사용되는 상태를 의미함
• let 키워드로 변수처럼 선언되는 상태를 $state로 선언

$derived

• state의 값에서 파생한 다른 값을 만들 수 있음
• $derived.by
  
  • 좀더 복잡한 값을 사용할 경우 함수로 넘겨줄 수 있음

$effect

• 특정 변수 변경에 따른 부수 효과를 정의
• V4

<script lang="ts">
  let count = 0;

  $: if (count > 10 || count < -10) {
    count = 0;
  }
</script>

<div>
  <div>
    <button onclick={() => count++}>increase</button>
    <button onclick={() => count--}>decrease</button>
  </div>
  <span>count : {count}</span>
</div>

•  V5

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

  $effect(() => {
    if (count > 10 || count < -10) {
      count = 0;
    }
  });
</script>

<div>
  <div>
    <button onclick={() => count++}>increase</button>
    <button onclick={() => count--}>decrease</button>
  </div>
  <span>count : {count}</span>
</div>

• svelte 컴파일러는 effect 내에서 실행되는 모든 코드의 state를 추적 및 감지하여 업데이트 시 함수를 실행한다.\
• $effect.pre
  • DOM 업데이트 이전에 실행된다.
  • 작동 원리는 $effect와 동일
• $effect.tracking : boolean
  • 코드가 $effect에 의해 실행되는지 아닌지 여부를 알려줌
• 주의사항
  • $effect는 일반 변수의 변화를 감지하지 못한다. 
  • 상태($state 또는 $derived)가 아닌 변수를 이용하여 조건분기할 경우 Svelte컴파일러는 변수의 변화를 감지하지 못하여 해당 조건 분기 내의 코드는 어떠한 경우에도 실행되지 않는다.
  • 조건분기가 필요할 경우 $state를 이용하여 선언하도록 하여 $effect가 감지할 수 있도록 해야 한다.

let isOpen = false;

$effect(() => {
	if (isOpen) {
    	// isOpen이 true로 바뀌더라도 isOpen이 state가 아닌 변수이므로 
        // $effect는 변수의 변화를 감지하지 못하여 이 블록 내 코드는 어떠한 경우에도 실행되지 않는다.
    }
});

<button onclick={() => isOpen = !isOpen}>
	click
</button>

$Props

• 하위 컴포넌트에 props 전달

• $bindable
  • 양방향 바인딩 명시

let { value = $bindable(), ...props } = $props();

$inspect

• 브라우저 개발자모드에서 상태 변화 추적

Snippet

• 특정 HTML 블럭을 표현할 수 있음

// Parent.svelte
// ...
{#snippet name()}
  <div>name</div>
{/snippet}
<Children name={name} />

// Children.svelte
// ...
{#if name}
    <div>
        {@render name()}
    </div>
{/if}

• @render snippet() 으로 함수 실행하는것처럼 실행