[Svelte] 스토어 구독

Svelte에서는 ‘구독’을 이용해 상태관리를 합니다.
다른 프레임워크처럼 상태 관리 라이브러리가 따로 있는게 아니라 Svelte 내부(svelte/store)에 포함되어 있습니다.

컴포넌트의 값이 변경될때마다 이를 구독하는 컴포넌트에게 변경된 값을 전달해주는게 목적이고,
스토어를 구독하는 방법은 다음처럼 두가지입니다.

 

   1. subscribe() 함수를 이용

   2. $ 기호 사용

 

subscribe()함수를 이용한 구독

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

  let value1;

  ExampleStore1.subscribe((data) => {
    value1 = data;
  });
</script>

<div>
    <p>ExampleStore1 스토어의 데이터: {value1}</p>
</div>

스토어를 구독하는 컴포넌트에서 subscribe()함수를 사용해 구독을 합니다.
그러면 부모 컴포넌트에서 변화가 일어날때마다 위의 자식 컴포넌트는 자동으로 상태 변화를 감지할 수 있게 됩니다.

다만 구독취소는 지원하지 않아 자식 컴포넌트가 구독을 취소하면 onDestroy()함수에 전달해 구독을 취소해야합니다.

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

  let value1;

  ExampleStore1.subscribe((data) => {
    value1 = data;
  });
  
  onDestroy(unsubscribe1);
</script>

<div>
    <p>ExampleStore1 스토어의 데이터: {value1}</p>
</div>

 

 

$ 기호를 이용한 구독

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

<div>
    <p>ExampleStore1 스토어의 데이터: {$ex1}</p>
</div>

subscribe()함수를 활용하면 로직이 많이 필요하고 자동 구독 취소가 안되는 반면에

‘$’ 기호를 사용하면 자동 구독 및 자동 구독 취소가 가능합니다.

 

 

더 자세한 내용은 스벨트 공식 문서에서 확인하실 수 있습니다.

https://svelte.dev/docs/svelte-store

svelte/store • Docs • Svelte