[Svelte]사용자 정의 스토어 구현 방법

사용자 정의 스토어

쓰기 가능 스토어, 읽기 전용 스토어, 상속 스토어 외에도 사용자가 스토어를 정의할 수 있습니다. 사용자 정의 스토어는 컴포넌트에서 스토어의 값을 변경하는 set() 함수와 update() 함수를 직접 호출하지 않고 사용자 정의 스토어에서 호출합니다.

 

스토어의 값을 변경하는 복잡한 계산식이 존재하는 경우 또는 데이터 검증 후 스토어의 값을 변경해야 하는 경우 컴포넌트가 아닌 사용자 정의 스토어에서 코드를 구현할 수 있습니다.

 

사용자 정의 스토어 구현 방법을 설명하기 전에 사용자 정의 스토어를 사용하지 않은 소스 코드를 살펴봅시다.

---

ExampleStore.js 파일에는 쓰기 가능한 numValue 스토어가 존재합니다.

 

[스토어 - ExampleStore.js]

import {writable} from 'svelte/store'

export const numValue = writable(1);

---

App.svelte 컴포넌트는 스토어 numValue를 구독합니다. "numValue x 2" 버튼을 클릭하면 update() 함수를 호출하여 numValue 스토어의 값을 2배로 증가시키며, "Reset" 버튼을 클릭하면 set() 함수를 호출하여 numValue 스토어의 값을 1로 초기화합니다.

 

[컴포넌트 - App.svelte]

<script>
  import { numValue } from './ExampleStore.js';

  const setDoubleNumValue = () => {
    numValue.update(num => num * 2);
  }

  const setReset = () => {
    numValue.set(1)
  }
</script>

<div>
  <button on:click={setDoubleNumValue}>numValue x 2</button>
  <button on:click={setReset}>Rest</button>
  <p>numValue: {$numValue}</p>
</div>

[실행 결과]

---

사용자 정의 스토어 구현

위에서 설명했듯이 사용자 정의 스토어를 사용하면, 컴포넌트에서 set() 함수와 update() 함수를 호출하지 않아도 됩니다.

 

사용자 정의 스토어를 구현하기 위해서는 subscribe() 함수를 사용해야 하며, 스토어 numValue에 subscribe(), doubleCalc(), rest() 함수를 제공합니다.

 

[스토어 - ExampleStore.js]

import {writable} from 'svelte/store'

const {subscribe, set, update} = writable(1);

export const numValue = {
  subscribe,
  doubleCalc: () => update(num => num * 2),
  reset: () => set(1)
};

---

사용자 정의 스토어가 구현되었으므로 컴포넌트에서 set() 함수와 update() 함수를 호출하는 코드를 제거하고 사용자 정의 스토어에 등록된 함수를 호출합니다.

 

[컴포넌트 - App.svelte]

<script>
  import { numValue } from './ExampleStore.js';
</script>

<div>
  <button on:click={() => numValue.doubleCalc()}>numValue x 2</button>
  <button on:click={() => numValue.reset()}>Rest</button>
  <p>numValue: {$numValue}</p>
</div>