[Svelte] 스벨트의 읽기 가능 스토어란? (Readable Stores)

 

 

 

 

 

 

🌈 스벨트의 읽기 가능한 스토어 (Readable Stores)

읽기 가능한 스토어는 쓰기 가능한 스토어와 달리 외부에서 값을 변경할 수 없다.

읽기 가능한 스토어의 값 변경은 오직 내부에서만 가능하다.

 

 

 

 

1️⃣ Store 생성

쓰기 가능한 스토어가 writable을 통해 생성된 것과 비슷하게 읽기 가능한 스토어는 readable을 통해 생성한다.

/* timer_store.js */
import { readable } from 'svelte/store'

export const timer = readable(0);

 

 

 

 

2️⃣ readable 메서드 및 스토어의 값 변경

readable은 writable 스토어와 달리 두 번째 인수를 가지며 두 번째 인수는 함수이다.

또한 이 함수는 한 개의 인수를 갖는데, 이 역시 함수이고, 이 함수는 스토어를 set 할 수 있다.

주로 읽기 가능한 스토어는, 타이머가 증가하거나 인터벌이 있는 경우, 또는 위치 정보를 가져올 경우에 사용한다.

/* timer_store.js */
import { readable } from 'svelte/store'

let count = 0;

export const timer = readable(0, (set) => {
    const interval = setInterval(() => {
        count++;
        set();
    }, 1000);

    /* 저장소가 필요 없을 때 Svelte가 자동으로 호출하는 함수로 인터벌을 제거하여 메모리 누수를 방지한다. */
    return () => {
        clearInterval(interval);
    }
});

 

HTML 태그에 달러 표시를 붙인 스벨트 문법을 사용하여 실시간으로 변수 값의 변화를 보여주거나,

값의 변경이 필요할 경우 스크립트단에서 추가적인 로직을 구현할 수 있다.

<!-- App.svelte -->
<script>
    import { timer } from ',/timer-store.js';
/*    timer.subscribe(count => {
        console.log('App: ' + count); 
    });
*/
</script>

<p>Count: {$timer}</p>