Stores

svelte에는 전역 상태를 저장하는 store가 계층구조에 포함되어있어 유용하게 사용할 수 있습니다. 그러나 모든 어플리케이션이 상태가 어플리케이션 계층 구조에 속하는 것은 아닙니다. 상태 관리를 위해서 자바스크립트 모듈 등을 사용해야 하는 경우도 많습니다. ( redux, recoil … )

스벨트에서는 상태관리를 stores를 통해 관리합니다. store는 값이 변경될 때 마다 subscribe 메소드를 사용하는 간단한 객체입니다.

1. Writable stores

import { writable } from 'svelte/store';

export const count = writable(0);

	import { count } from './stores.js';

	function reset() {
		count.set(0);
	}
</script>

<button on:click={reset}>
	reset
</button>

	import { count } from './stores.js';

	function increment() {
		count.update(n => n + 1);
	}
</script>

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

	import { count } from './stores.js';

	function decrement() {
		count.update(n => n - 1);
	}
</script>

<button on:click={decrement}>
	-
</button>

	import { count } from './stores.js';
	import Incrementer from './Incrementer.svelte';
	import Decrementer from './Decrementer.svelte';
	import Resetter from './Resetter.svelte';

	let countValue;

	count.subscribe(value => {
		countValue = value;
	});
</script>

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

<Incrementer/>
<Decrementer/>
<Resetter/>

2. Auto-subscriptions

이전의 예제는 스토어가 구독되지만 구독 취소는 되지 않았습니다.

const unsubscribe = count.subscribe(value => {
	countValue = value;
});

subscribe 메소드를 호출하면 unsubscribe 함수가 반환됩니다.

이제 unsubscribe를 선언할 수 있으며 onDestroy lifecycle hook을 통해 호출할 수 있습니다.

  import { onDestroy } from 'svelte';
	import { count } from './stores.js';
	import Incrementer from './Incrementer.svelte';
	import Decrementer from './Decrementer.svelte';
	import Resetter from './Resetter.svelte';

	let countValue;

	const unsubscribe = count.subscribe(value => {
		countValue = value;
	});

	onDestroy(unsubscribe);
</script><h1>The count is {countValue}</h1>

svelte에서는 컴포넌트가 여러 스토어를 구독하는 경우 등을 위해서 자동 구독을 지원합니다. 구독하는 변수 앞에 $ 를 붙여 사용할 수 있습니다.

	import { count } from './stores.js';
	import Incrementer from './Incrementer.svelte';
	import Decrementer from './Decrementer.svelte';
	import Resetter from './Resetter.svelte';
</script>
	<h1>The count is {$count}</h1>

자동 구독은 컴포넌트의 최상위 스코프에서 선언된 store 변수에서만 작동합니다.

$count 는 위 예제와 같이 마크업 내에서만 사용 가능한 것이 아닌, 이벤트 핸들러나 반응성 선언과 같이 어디에서나 사용 가능합니다.

$ 가 앞에 붙어있는 변수는 모두 store 값을 참조하는 값입니다. 따라서 Svelte에서는 $로 시작하는 변수명을 짓는 것은 피해야 합니다.

3. Readable Stores

만약 마우스 위치나 사용자의 지리적 위치 등을 나타내는 store 가 있다면 외부에서 해당 스토어의 값을 설정하지 못합니다. 이러한 경우을 위하여 읽기만 가능한 store를 지정할 수 있습니다.

import { readable } from 'svelte/store';

export const time = readable(new Date(), function start(set) {
	const interval = setInterval(() => {
		set(new Date());
	}, 1000);

	return function stop() {
		clearInterval(interval);
	};
});

readable에 대한 첫번째 인자는 초기 값을 지정해줍니다. 아직 값이 없는 경우라면 null값이나 undefined 값이 될 수도 있습니다. 두번째로는 set을 콜백으로 받고 stop 함수를 리턴하는 start 함수를 입니다.

store에서 첫번째 구독자를 얻을 때 start 함수가 호출되며 마지막 구독자가 구독을 해지하게 된다면 stop 함수가 호출하게 되는 구조입니다.

4. Derived stores

Derived 를 통해서 다른 store에 기초되는 값을 가지는 store를 만들 수 있습니다. 이전 예제를 기반으로 page가 열린 시간을 파생하는 store를 만들 수 있습니다.

export const elapsed = derived(
	time, $time => Math.round(($time - start) / 1000)
);

여러 입력에서 저장소를 파생하고, 값을 반환하는 대신 명시적으로 값을 ‘set’ 할 수 있습니다 ( 비동기적으로 값을 파생하는데 유용)

Derived는 기존에 생성되어있는 쓰기 가능한 store, 읽기 가능한 store의 데이터를 기반으로 동작하게 됩니다.

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

export let count = writable(1)
export let double = derived(count,$count => $count * 2 )
//구독의 의미가 아니라 count 함수의 데이터라는 뜻으로 $를 추가한다.
//svelte 파일이 아닌 js 파일 내 이므로 자동구독으로 실행되지 않음
export let total = derived([count,double], ([$count, $double], set) => {
	set($count+$double)
})
// export let total = derived([count,double], ([$count, $double])=> { return $count+$double } 과 동일하다
export let initialValue = derived(count, ($countm set) => {
	setTimeout(() => {
	set($count + 1)
},1000)
},'최초 계산중 ...')

import { count, double, total } from './store.js'

console.log(double)
</script>

<button on:click={()=> $count += 1 }> click! </button>
<h1>total: {$total}</h1>
<h2>count: {$count}</h2>
<h2>double: {$double}</h2>
<h2>count + 1 : {$initialValue}</h2>

derived는 계산된 store입니다. 따라서 함수의 첫번째 인자로 계산할 대상의 store를 매개변수로 입력하고 두번째는 실행 될 코드를 입력합니다. 두가지 값을 입력할 때는 배열을 사용해서 입력할 수 있습니다. 연결되어있는 스토어의 값이 바뀌면 매번 실행되며 초기화 되었다가 재 구독 하는 형식으로 다른 store들과 차이점이 있습니다.

5. Store 값 얻기 (get)

store에 구독 하지 않고 단순히 해당하는 값만 읽어오고 싶은 경우 사용합니다.

import { get } from 'svelte/store'
import { count, double, user } from './store.js'

console.log(get(count))
console.log(get(double))
console.log(get(user))

import { writable, readable, derived, get } from 'svelte/store'

export let count = writable(1)
export let double = derived(count, $count => $count * 2)
export let user = readable({
	name: 'Heropy'
	age: 85,
	email:'thesecon@gmail.com'
})

console.log(get(count))
console.log(get(double))
console.log(get(user))

6. Custom stores

custom store는 기존의 store에서 추가로 원하는 메소드를 추가하여 커스텀해서 사용 가능한 store입니다. writable, readable 등

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

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

<button on:click={count.increment}>+</button>
<button on:click={count.decrement}>-</button>
<button on:click={count.reset}>reset</button>

import { writable } from 'svelte/store';

function createCount() {
	const { subscribe, set, update } = writable(0);

	return {
		subscribe, //subscribe를 가지고있으면 App.svelte에서 '$'자동구독을 이용해서 사용 가능
		increment: () => update(n => n + 1),
		decrement: () => update(n => n - 1),
		reset: () => set(0)
	};
}

export const count = createCount();

예제와 같이 기본 writable store에서 increment, decrement, reset 메소드가 추가로 포함되게 구성할 수 있습니다. return 값에서 set 과 update는 입력하지 않아도 됩니다.

import { writable } from 'svelte/store'

const { set, update, subscribe } = writable(0)

export let count = {
set,
update,
subscribe,
increment: () => update(n => n + 1),
decrement: () => update(n => n - 1),
reset: () => set(0)
}

위와 같이 작성할 수도 있습니다.

예제 2)

import { fruits } from './fruits.js'

let value

<input bind:value/>
<button on:click={() => fruits.setItem(value)}>
	Add fruit!
</button>
<button on:click={() => console.log(fruits.getList())}>
	Log fruit list!
</button>

<ul>
	{#each $fruits as {id, name} (id)}
		<li>{name}</li>
	{/each}
</ul>

import { writable , get } from 'svelte/store'

const _fruits = writable([
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Cherry' }
])

export let fruits = {
..._fruits, // writable이기 때문에 set, update, subscribe가 포함되어있다
getList: () => get(_fruits).map((f) => f.name),
setItem: () => { 
	_fruits.update((f) => {
		f.push({
			id: f.length + 1,
			name
		})
		return f
	})
	}
}

7. Store bindings

set 메소드를 가지고 있는 writable store라면 컴포넌트에 bind하는 것과 동일하게 값을 bind 할 수 있습니다.

예를 들어 쓰기 가능한 저장소에 name을 가지고 있고 파생된 저장소에는 greeting을 가지고 있을 때 input 요소에 해당 값을 업데이트 할 수 있습니다.

<input bind:value={$name}>

컴포넌트 내부에 값을 저장하도록 직접 할당할 수도 있습니다.

<button on:click="{() => $name += '!'}">
	Add exclamation mark!
</button>

$name += '!' 와 name.set($name + '!') 는 동일합니다.

• 전체 예제

  <script>
  	import { name, greeting } from './stores.js';
  </script>
  
  <h1>{$greeting}</h1>
  <input bind:value={$name}>
  
  <button on:click="{() => $name += '!'}">
  	Add exclamation mark!
  </button>

  import { writable, derived } from 'svelte/store';
  
  export const name = writable('world');
  
  export const greeting = derived(
  	name,
  	$name => `Hello ${$name}!`
  );