[Svelte] 기본

상태 관리

Svelte는 let 변수가 변경될 때마다 이를 사용하는 모든 부분이 그냥 자동으로 업데이트된다.

예시 코드1)

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

    $: console.log('count가 변경되었습니다:', count);
    
    function increment() {
        count += 1;
    }
</script>

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

예시 코드2)

name 변수가 변경될 때마다 greeting 변수도 자동으로 업데이트 됨

<script lang="ts">
    let name = 'World';

    $: greeting = `Hello, ${name}!`;
</script>

<input bind:value={name} />
<p>{greeting}</p>

전역 상태 관리

writable을 그냥 export해서 사용하면 됨

 

import { writable } from 'svelte/store';

export const count = writable(0);

사용법

• .set(): 스토어의 값을 설정합니다.
• .update(): 현재 값을 기반으로 새로운 값을 설정하는 함수를 받습니다.
• .subscribe(() => {}): 스토어의 값이 변경될 때마다 호출될 콜백 함수를 등록합니다.
• get(상태값): 스토어의 현재 값을 반환
• $상태값: 변경 시마다 동적으로 값을 반환

예시 코드)

<script lang="ts">
    import { count } from './store';
</script>

<button on:click={() => $count.update(n => n + 1)}>
    Clicked {$count} times
</button>

동적 렌더링

조건문으로 분기 렌더링

1. 단순 조건문

            {#if chat.type === 'modelfiles'}
                <Modelfiles />
            {:else if chat.type === 'prompts'}
                <Prompts />
            {:else if chat.type === 'documents'}
                <Documents />
            {/if}

2. 반목문

{#each 배열 as 요소, 인덱스 (키)}
	<!-- 반복할 내용 -->
{:else}
	<li>아이템이 없습니다.</li>
{/each}

3. 필터

{#each $chats.filter((chat) => { ... }) as chat, i}
	<!-- chat 요소와 인덱스 i를 사용하여 반복할 내용 -->
{/each}

4. <svelte:component>

컴파일 타임에 결정되지 않고 런타임에 컴포넌트를 동적으로 선택하여 렌더링해야 할 때 유용 (svelte는 빌드 시점에 렌더링이 되는 방식)

<script lang="ts">
    import Modelfiles from './Modelfiles.svelte';
    import Prompts from './Prompts.svelte';
    import Documents from './Documents.svelte';

    const chats = writable([]);

    const componentMap = {
        modelfiles: Modelfiles,
        prompts: Prompts,
        documents: Documents
    };
</script>

<div>
    {#each $chats as chat}
        <div>
            {#if chat.type in componentMap}
                <!-- 컴포넌트 맵에서 chat.type에 해당하는 컴포넌트를 동적으로 렌더링 -->
                <svelte:component this={componentMap[chat.type]} />
            {/if}