쓰기 기능 스토어(writable) & 수동 구독과 자동 구독

이번에는 쓰기 가능한 스토어에 대해서 알아보고자 한다. 아래 구조를 보자

App.svelte

<script>
  import WritableMethods from "./WritableMethods.svelte";
  let toggle = true;
</script>

<button on:click={() => (toggle = !toggle)}>Toggle</button>

{#if toggle}
  <WritableMethods />
{/if}

store.js

import { writable } from "svelte/store";

export let count = writable(0);

WritableMothods.svelte

<script>
  import { count } from "./store.js";
  console.log(count); // { set: f, update: f, subscribe: f }
  let number;

  // 스토어 객체인 count를 구독(subscribe)를 하며, 값이 변경되면 익명함수가 실행되며 number에 대입한다.
  count.subscribe((c) => {
    number = c;
  });
</script>

<h2>{number}</h2>

위와 같은 컴포넌트 구조가 있다고 하자. WritableMethods 컴포넌트에서 스토어 객체인 count를 바라보고, 해당 값의 변화에 따라 number 변수가 변경되는 로직이다.

이번에는 count가 실제로 변경되도록 구성해보자

WritableMothods.svelte

<script>
  import { count } from "./store.js";
  console.log(count);
  let number;

  // 스토어 객체인 count를 구독(subscribe)를 하며, 값이 변경되면 익명함수가 실행되며 number에 대입한다.
  count.subscribe((c) => {
    number = c;
  });

  function increase() {
    // count 값을 1 증가시키면, number는 count를 구독하므로 값이 함께 증가한다.
    count.update((c) => c + 1);
  }
</script>

<button on:click={increase}>Click Me!</button>
<h2>{number}</h2>

위처럼 button에 increase 함수를 연결시켜준다. increase 함수는 count 값을 1 증가시키며 number는 count 값을 구독하므로 값이 함꼐 증가한다.

또 다른 스토어 기능에 대해 알아보자.

store.js

import { writable } from "svelte/store";

// export let count = writable(0);
export let count = writable(0, () => {
  console.log("count 구독자가 1명 이상일 때!");
});

writable 객체에 첫번째 인수로 해당 스토어 값의 초기값을 지정할 수 있었다. 이외로도 두 번째 인수에 위와 같이 익명함수를 넣어줄 수도 있다. 이는 해당 객체에 구독(subscribe)이 생기게 되면, 위 두번째 인수가 실행된다. (생겨날 때마다 실행되는 것이 아닌, 구독자가 1명 이상이면 최초로 실행된다.)

위 두 번째 인수가 반환값을 가지도록 아래와 같이 작성할 수도 있다.

store.js

export let count = writable(0, () => {
  console.log("count 구독자가 1명 이상일 때!");
  return () => {
    console.log("count 구독쟈가 0명일 때..");
  };
});