Svelte 실전 프로젝트 완벽 가이드

Svelte의 핵심 개념부터 고급 패턴까지 실전 프로젝트 구현에 필요한 모든 것을 다룹니다. 반응성, 컴포넌트 통신, 스토어 관리, 애니메이션까지 실무에서 바로 활용 가능한 패턴을 제공합니다.

---

---

들어가며

이 글에서는 Svelte 실전 프로젝트 완벽 가이드에 대해 상세히 알아보겠습니다. 총 12가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

1. 반응성_선언
2. 컴포넌트_Props와_이벤트
3. Writable_Store
4. Derived_Store
5. 바인딩_패턴
6. 조건부_렌더링과_반복
7. Await_블록
8. Transition_애니메이션
9. Custom_Actions
10. Slot과_컴포넌트_합성
11. Context_API
12. Lifecycle_Hooks

---

1. 반응성 선언

개요

Svelte의 핵심인 반응성 선언($:)을 사용하여 값이 변경될 때마다 자동으로 계산되는 로직을 구현합니다.

코드 예제

<script>
  let count = 0;
  let doubled = 0;

  $: doubled = count * 2;
  $: if (count >= 10) {
    alert('count is too high!');
  }
</script>

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

설명

$: 구문은 의존하는 변수가 변경될 때마다 자동으로 재실행됩니다. 복잡한 상태 관리 없이 선언적으로 반응성을 구현할 수 있습니다.

---

2. 컴포넌트 Props와 이벤트

개요

부모-자식 컴포넌트 간의 데이터 전달과 커스텀 이벤트를 통한 양방향 통신을 구현합니다.

코드 예제

<script>
  import { createEventDispatcher } from 'svelte';
  export let title = 'Default Title';

  const dispatch = createEventDispatcher();

  function handleClick() {
    dispatch('notify', { message: 'Button clicked' });
  }
</script>

<button on:click={handleClick}>{title}</button>

설명

export로 props를 선언하고, createEventDispatcher로 부모 컴포넌트에 이벤트를 전달할 수 있습니다. 타입 안전한 컴포넌트 통신이 가능합니다.

---

3. Writable Store

개요

여러 컴포넌트에서 공유하는 전역 상태를 writable 스토어로 관리합니다.

코드 예제

// store.js
import { writable } from 'svelte/store';

export const user = writable({ name: '', loggedIn: false });

// Component.svelte
<script>
  import { user } from './store.js';

  $user.name = 'John';
  $user.loggedIn = true;
</script>

<p>Welcome, {$user.name}!</p>

설명

$ 접두사를 사용하면 자동으로 구독/구독해제가 처리됩니다. 컴포넌트 간 상태 공유가 매우 간단합니다.

---

4. Derived Store

개요

기존 스토어에서 파생된 값을 계산하는 derived 스토어를 생성합니다.

코드 예제

import { writable, derived } from 'svelte/store';

export const items = writable([
  { id: 1, price: 100 },
  { id: 2, price: 200 }
]);

export const total = derived(items, $items =>
  $items.reduce((sum, item) => sum + item.price, 0)
);

// Component: <p>Total: ${$total}</p>

설명

derived는 원본 스토어가 변경될 때마다 자동으로 재계산됩니다. 복잡한 계산 로직을 재사용 가능하게 만듭니다.

---

5. 바인딩 패턴

개요

양방향 데이터 바인딩을 통해 폼 입력과 상태를 자동 동기화합니다.

코드 예제

<script>
  let name = '';
  let agreed = false;
  let selected = 'option1';
</script>

<input bind:value={name} placeholder="Enter name" />
<input type="checkbox" bind:checked={agreed} />
<select bind:value={selected}>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

설명

bind 디렉티브로 입력 요소와 변수를 양방향으로 연결합니다. 수동으로 이벤트 핸들러를 작성할 필요가 없습니다.

---

6. 조건부 렌더링과 반복

개요

{#if}, {#each} 블록을 사용하여 동적 UI를 구현합니다.

코드 예제

<script>
  let users = [
    { id: 1, name: 'Alice', active: true },
    { id: 2, name: 'Bob', active: false }
  ];
</script>

{#each users as user (user.id)}
  {#if user.active}
    <div class="active">{user.name}</div>
  {:else}
    <div class="inactive">{user.name}</div>
  {/if}
{/each}

설명

each 블록의 (user.id) 키를 사용하면 효율적인 DOM 업데이트가 가능합니다. 조건부 렌더링과 결합하여 복잡한 UI를 선언적으로 구현합니다.

---

7. Await 블록

개요

비동기 데이터를 로딩, 성공, 에러 상태로 우아하게 처리합니다.

코드 예제

<script>
  async function fetchUser(id) {
    const res = await fetch(`/api/users/${id}`);
    if (!res.ok) throw new Error('Failed to fetch');
    return res.json();
  }

  let promise = fetchUser(1);
</script>

{#await promise}
  <p>Loading...</p>
{:then user}
  <p>Hello {user.name}!</p>
{:catch error}
  <p>Error: {error.message}</p>
{/await}

설명

await 블록은 Promise의 모든 상태를 선언적으로 처리합니다. 별도의 상태 변수나 useEffect 같은 훅이 필요 없습니다.

---

8. Transition 애니메이션

개요

내장된 transition 함수로 요소의 등장/퇴장 애니메이션을 구현합니다.

코드 예제

<script>
  import { fade, fly, scale } from 'svelte/transition';
  let visible = true;
</script>

<button on:click={() => visible = !visible}>
  Toggle
</button>

{#if visible}
  <div transition:fly="{{ y: 200, duration: 500 }}">
    Animated content
  </div>
{/if}

설명

transition 디렉티브는 요소가 DOM에 추가/제거될 때 자동으로 애니메이션을 적용합니다. CSS 애니메이션보다 훨씬 간단합니다.

---

9. Custom Actions

개요

use 디렉티브로 DOM 요소에 재사용 가능한 동작을 추가합니다.

코드 예제

<script>
  function clickOutside(node) {
    const handleClick = (e) => {
      if (!node.contains(e.target)) {
        node.dispatchEvent(new CustomEvent('outclick'));
      }
    };

    document.addEventListener('click', handleClick, true);
    return { destroy: () => document.removeEventListener('click', handleClick, true) };
  }
</script>

<div use:clickOutside on:outclick={() => console.log('Clicked outside')}>
  Click outside me
</div>

설명

action은 DOM 요소가 생성될 때 실행되고 제거될 때 cleanup됩니다. 툴팁, 드래그, 포커스 관리 등을 재사용 가능하게 만듭니다.

---

10. Slot과 컴포넌트 합성

개요

슬롯을 사용하여 유연하고 재사용 가능한 컴포넌트를 설계합니다.

코드 예제

<!-- Card.svelte -->
<div class="card">
  <header>
    <slot name="header">Default Header</slot>
  </header>
  <slot>Default Content</slot>
  <footer>
    <slot name="footer" />
  </footer>
</div>

<!-- Usage -->
<Card>
  <h1 slot="header">Custom Header</h1>
  <p>Custom content here</p>
</Card>

설명

named slot으로 여러 영역을 정의하고 기본값을 설정할 수 있습니다. React의 children 패턴보다 더 명확하고 유연합니다.

---

11. Context API

개요

setContext와 getContext로 컴포넌트 트리 전체에 데이터를 공유합니다.

코드 예제

<script>
  // Parent.svelte
  import { setContext } from 'svelte';
  setContext('theme', { color: 'blue' });

  // Child.svelte (any depth)
  import { getContext } from 'svelte';
  const theme = getContext('theme');
</script>

<div style="color: {theme.color}">
  Themed content
</div>

설명

Context는 props drilling 없이 깊은 컴포넌트에 데이터를 전달합니다. 스토어와 달리 컴포넌트 인스턴스에 국한되어 더 안전합니다.

---

12. Lifecycle Hooks

개요

컴포넌트의 생명주기에 맞춰 코드를 실행합니다.

코드 예제

<script>
  import { onMount, onDestroy, beforeUpdate, afterUpdate } from 'svelte';

  let interval;

  onMount(() => {
    interval = setInterval(() => console.log('tick'), 1000);
    return () => clearInterval(interval);
  });

  onDestroy(() => {
    console.log('Component destroyed');
  });
</script>

설명

onMount는 컴포넌트가 DOM에 마운트된 후 실행되며, cleanup 함수를 반환할 수 있습니다. beforeUpdate/afterUpdate로 DOM 업데이트 전후를 제어합니다.

---

마치며

이번 글에서는 Svelte 실전 프로젝트 완벽 가이드에 대해 알아보았습니다. 총 12가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

#Svelte #Reactivity #Store #Component #Animation