[javascript] Svelte에서 애플리케이션 상태 관리 방법에는 어떤 것들이 있나요?

24 Nov 2023

javascript

컴포넌트 내부의 상태 관리

Svelte 컴포넌트는 내부적으로 상태를 가질 수 있습니다. let 키워드를 사용하여 변수를 선언하고 변경사항을 추적할 수 있습니다. 이를 통해 컴포넌트 자체적으로 상태를 관리할 수 있습니다.

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

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

상위 컴포넌트로 상태 전달

Svelte에서는 상위 컴포넌트에서 하위 컴포넌트로 상태를 전달하는 것도 간단합니다. props를 사용하여 값을 전달하고, 이 값은 하위 컴포넌트에서 읽거나 변경할 수 있습니다.

// Parent.svelte
<script>
  let message = 'Hello Svelte';
</script>

<Child {message} />

// Child.svelte
<script>
  export let message;
</script>

<p>{message}</p>

상태 관리 라이브러리 사용

Svelte에서는 다른 상태 관리 라이브러리를 사용하여 복잡한 애플리케이션의 상태를 관리할 수도 있습니다. Redux, MobX, Zustand 등과 같은 라이브러리를 사용할 수 있습니다. 이러한 라이브러리를 이용하면 상태의 중앙 집중화, 상태 변경에 대한 액션 디스패치 등을 보다 쉽게 처리할 수 있습니다.

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

export const count = writable(0);

// App.svelte
<script>
  import { count } from './store.js';
  
  function increment() {
    count.update(n => n + 1);
  }
</script>

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

이외에도 Svelte에는 상태 라이브러리를 위한 특수한 도구와 패턴이 있습니다. 예를 들어, async 로딩, 지연된 초기화, 재사용 가능한 상태 관리 컴포넌트 등의 패턴을 사용할 수 있습니다.

더 자세한 내용은 Svelte 문서에서 확인할 수 있습니다.