[Svelte]스토어 사용 방법 - 쓰기 가능(writable)

스토어(Store)란?

부모-자식 컴포넌트 간 데이터를 공유하는 방법으로 props를 사용할 수 있으며, 부모-자식 컴포넌트 구조가 아닌 컴포넌트 간에 데이터를 공유하는 방법으로 콘텍스트(Context)가 존재합니다.

 

Svelte에서 컴포넌트 간에 데이터를 공유하는 또 다른 방법으로 스토어(Store)가 존재하는데, 스토어는 콘텍스트처럼 서로 관련 없는 컴포넌트 간에 데이터를 공유하는 방법입니다. 

 

예를 들어, 다음 그림처럼 구성된 컴포넌트 구조에서 A_1 컴포넌트의 데이터를 C_2 컴포넌트로 props로 전달하고자 합니다.

A_1 컴포넌트의 데이터를 C_2 컴포넌트로 전달하기 위해서는 최상위 컴포넌트인 App 컴포넌트와 C_1 컴포넌트를 거쳐야 합니다. 따라서, A_1 컴포넌트의 데이터를 전달하는 과정을 App 컴포넌트와 C_1 컴포넌트에서도 구현해야 하며, 컴포넌트의 구조가 그림보다 복잡하거나 변경되는 경우 데이터 흐름이 상당히 복잡해질 수 있습니다.

 

Svelte의 스토어를 사용하면 데이터 전달이 쉬워집니다. 스토어는 컴포넌트 외부의 영역으로 컴포넌트의 데이터를 스토어에 등록하거나 가져올 수 있습니다.

스토어를 활용하면 컴포넌트의 구조가 복잡하거나 변경되더라도 코드를 수정할 필요가 없다는 장점이 있습니다.

 

Svelte는 쓰기 가능 스토어, 읽기 전용 스토어, 상속 스토어를 지원하는데 이번 포스팅에서는 쓰기 가능 스토어와 읽기 전용 스토어 사용 방법을 소개합니다.

---

쓰기 가능 스토어

컴포넌트가 스토어에 데이터를 등록하거나 변경할 수 있는 경우 쓰기 가능 스토어라고 말합니다. 쓰기 가능 스토어를 구현하기 위해서는 svelte/store 패키지에 정의되어 있는 writable() 함수를 호출해야 합니다.

 

쓰기 가능 스토어는 스토어에 등록된 데이터를 읽기 위한 subscribe() 함수 이외에 스토어에 데이터를 등록하는 set() 함수와 스토어에 등록된 데이터를 변경하는 update() 함수를 제공합니다.

스토어 만들기

스토어를 만들기 위해 스토어 파일을 생성합니다. 스토어는 자바스크립트 파일이므로 .svelte 확장자를 사용하지 않고 .js 확장자를 사용합니다.

 

ExampleWritableStore.js라는 이름의 파일을 생성했습니다.

우선, svelte/store 패키지에 정의되어 있는 writable() 함수를 import하고 초깃값을 0으로 설정합니다.

 

[스토어 - ExampleWritableStore.js]

import {writable} from 'svelte/store';

const numStore = writable(0);

export {numStore}

Store에 등록된 변수는 다른 객체를 참조하지 못하도록 const 키워드로 선언합니다.

스토어 구독

스토어에 등록된 데이터를 가져오기 위해 컴포넌트에서 스토어를 구독합니다.

 

컴포넌트의 script 영역에 import문을 사용하여 ExampleWritableStore.js 파일을 불러오고 numStore 스토어를 구독하기 위해 subscribe() 함수를 사용합니다.

 

스토어의 데이터가 변경되는 경우 subscribe() 함수의 매개변수로 전달된 콜백 함수가 실행되고 스토어의 변경된 데이터가 변수 num에 재할당됩니다.

 

[컴포넌트 - App.svelte]

<script>
  import {numStore} from './ExampleWritableStore.js';

  let num = 0;

  // numStore 스토어의 데이터가 변경되면
  // subscribe() 함수의 매개변수로 전달된 콜백 함수가 실행됩니다.
  numStore.subscribe((data) => {
    // 스토어의 변경된 데이터를 변수 num에 재할당합니다.
    num = data;
  });
</script>

<div>
  <span>{num}</span>
</div>

스토어 데이터 변경

스토어에 등록된 데이터를 변경하기 위해서는 update() 함수를 사용합니다. update() 함수는 스토어에 등록된 데이터를 변경하는 함수로 전달받습니다.

 

다음 예제는 버튼을 클릭하면 스토어에 등록된 데이터의 값을 1 증가시킵니다. subscribe() 함수에 전달된 콜백 함수에는 스토어의 데이터를 콘솔에 출력하는 코드가 추가되었습니다. 따라서, 버튼을 클릭할 때마다 콘솔에 스토어의 데이터가 출력됩니다.

 

[컴포넌트 - App.svelte]

<script>
  import {numStore} from './ExampleWritableStore.js';

  let num = 0;

  numStore.subscribe((data) => {
    console.log(data);
    num = data;
  });

  function incrementCounter() {
    numStore.update(data => data + 1);
  }
</script>

<div>
  <button on:click={incrementCounter}>Increment</button>
  <span>{num}</span>
</div>

[실행 결과]