EN

페이지 4: 컴포넌트, 프롭스 및 스토어

4. 컴포넌트, 프롭스 및 스토어

SvelteKit은 Svelte 컴포넌트 모델을 기반으로 합니다. 컴포넌트는 UI의 재사용 가능한 빌딩 블록입니다.

4.1. Svelte 컴포넌트 및 프롭스

.svelte 파일은 HTML, CSS, JavaScript를 하나의 파일에 포함하여 컴포넌트를 정의합니다. export let을 사용하여 프롭스를 선언합니다.

<!-- src/lib/Button.svelte -->
<script>
  export let text = 'Click Me';
  export let onClick = () => {};
</script>
<button on:click={onClick}>{text}</button>

<style>
  button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
</style>

부모 컴포넌트에서 프롭스를 전달하여 사용합니다:

<!-- src/routes/+page.svelte -->
<script>
  import Button from '$lib/Button.svelte';
  function handleClick() {
    alert('Button clicked!');
  }
</script>
<Button text="Learn More" onClick={handleClick} />

4.2. Svelte 스토어를 사용한 상태 관리

스토어는 여러 컴포넌트 간에 상태를 공유하고 반응적으로 업데이트하는 데 사용되는 객체입니다.

// src/lib/stores.js
import { writable } from 'svelte/store';
export const count = writable(0);

컴포넌트에서 스토어 사용하기:

<!-- src/routes/+page.svelte -->
<script>
  import { count } from '$lib/stores';
</script>
<h1>Count: {$count}</h1>
<button on:click={() => count.update(n => n + 1)}>Increment</button>
<button on:click={() => count.set(0)}>Reset</button>

$count 구문은 스토어의 값을 구독하고 자동으로 업데이트합니다.

Contact Us