[Svelte] Svelte 기본문법 #2 (Store)

Store

Store란 Svelte에서 상태관리(state management) 기능을 제공하는 저장소

1) 기본사용법

 - 수동 구독 및 수동 리소스 해지

<script>
  import { onDestroy } from 'svelte';
  import { count } from './stores.js';

  let count_value;

// 구독 리턴 값은 구독해지 기능
  const unsubscribe = count.subscribe(value => { 
    count_value = value;
  });
  
// 해제 하지 않는 경우 메모리 누수 발생
  onDestroy(unsubscribe);
</script>

<h1>The count is {count_value}</h1>

 

 - 자동 구독 : subscribe(), unsubscribe()의 일련의 기능을 자동화 하는 방법으로, $ 기호 사용 시 자동으로 처리됩니다. 

  * 주의 사항 : store 변수 정의는 <script> 하단에 바로 import 해야 하며(block범위에서 변수 정의 금지), $ 기호는 일반 변수 선언 시 사용할 수 없습니다.

// store.js
import { writable } from 'svelte/store'; // read, write, delete가 가능한 store 모듈
export const count = writable(초기값);


// app.svelte
<script>
import { count } from './store.js'

//$ 기호 사용시 자동 구독, 해당 컴포넌트 해제 시에 자동으로 구독 해지
const onIncrement = () => {
  $count = $count + 1;  // store state는 $기호 사용
}
</script>

<button on:click={onIncrement}>+</button>

2) store의 사용자 정의 method로 구현

 // store.js
import { writable } from 'svelte/store'; // read, write, delete가 가능한 store 모듈

function createCount() {
  const { subscribe, set, update } = writable(0);
  // subscribe - store 값 변경 감지 및 반영
  // set - store 값 초기화
  // update - store 일부 값 update
  const increment = () => update( count => count + 1);
  const decrement = () => update( count => count - 1);
  const reset = () => set(0);

 return {
    subscribe,
    increment,
    decrement,
    reset
 }
}

export const count = createCount();

// app.svelte
<script>
import { count } from './store.js'

const onIncrement = () => {
  count.increment();
}
</script>
<button on:click={onIncrement}>+</button>

 

 

참고사이트

https://svelte.dev/docs/introduction

https://www.inflearn.com/course/lecture?courseSlug=%EC%8A%A4%EB%B2%A8%ED%8A%B8-%EC%8B%9C%EC%9E%91-%EC%9B%B9-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C&unitId=152818&tab=curriculum