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

 

 

 

 

 

 

🌈 스벨트의 쓰기 가능한 스토어 (Writable Stores)

스벨트의 스토어에는 두 가지 종류가 있으며, 쓰기 가능한 스토어와 읽기 가능한 스토어이다.

 

먼저 이번 포스팅에서는 쓰기 가능한 스토어에 대해 정리해 보려고 한다.

 

◾ 쓰기 가능한 저장소(writable)
   ▫ 쓰기 가능한 저장소를 생성하려면 특정 함수를 호출해야 한다.
   ▫ 저장소는 javascript에서 사용하므로 어느 컴포넌트에서나 불러올 수 있다.
   ▫ 저장소를 불러온 컴포넌트에서는 두 가지 작업을 할 수 있다.
     ⅰ) subscribe
           - 저장소의 데이터가 바뀔 때마다 이를 전달받은 컴포넌트가 변화에 반응하는 것(ex.데이터 출력)
     ⅱ) set, update

           - 데이터를 저장소에 설정(set)하거나 업데이트(update)할 수 있다.

 

 

 

 

1️⃣ store 생성 및 subscribe

먼저 아래 코드와 같이 svelte 파일이 아닌 js 파일에 데이터를 만들고  writable하여 스토어를 등록한다.

그리고 해당 데이터를 스벨트에서 사용하기 위해 export 시킨다.

/* cart_store.js */
import { writable } from 'svelte/store'

const cart = writable([
    {
        id: 'p1',
        title: 'Test',
        price: 9.99
    }, {
        id: 'p2',
        title: 'Test',
        price: 9.99
    }
])

export default cart;

 

위 스토어 데이터를 사용하기 위해 import한 스토어 컴포넌트를 subscribe 한다.

<!-- cart.svelte -->
<script>
    import cartItems from './cart-store.js'; // cartItems 자리에는 원하는 이름을 쓰면 된다.

    let items;

    cartItems.subscribe(its => {
        items = its
    });
    // items : [{id:"p1", title:"Test", ...},{id:"p2", title:"Test", ...}]
</script>

 

 

 

 

2️⃣ store 업데이트

스토어에 있는 데이터를 갱신하기 위해 import한 스토어 컴포넌트에 update 메서드를 사용하고,

로직을 구현한 후 리턴값을 전달하여 스토어 갱신을 완료한다.

<!-- cart.svelte -->
<script>
    import cartItems from './cart-store.js'; // cartItems 자리에는 원하는 이름을 쓰면 된다.

    function addToCart() {
        // cartItems.set([]); // 해당 store에 적용한 subscribe 기능이 실행된다.
        cartItems.update(items => {
            return [
                ...items,
                {
                    id: 'p3',
                    title: 'Test',
                    price: 9.99
                }
            ]
        }); // 현재 store의 데이터를 업데이트 한다.
        /* cartItems : [
            {id:"p1", title:"Test", ...}
            ,{id:"p2", title:"Test", ...}
            ,{id:"p3", title:"Test", ...}
           ]
        */
    }
</script>

 

 

 

 

3️⃣ store subscribe 관리

subscribe는 언마운트 되기 전까지 메모리에 계속 남아있는 상태이다.
따라서 메모리 누수를 방지하기 위해 상수에 subscribe를 담아 임의로 제거해 줄 필요가 있다.

/* cart.svelte */
<script>
    import { onDestroy } form 'svelte';
    import cartItems from './cart-store.js'; // cartItems 자리에는 원하는 이름을 쓰면 된다.

    let items;

    const unsubscribe =  cartItems.subscribe(its => {
        items = its
    });

    onDestroy(() => {
        if (unsubscribe) {
            unsubscribe();
        }
    })
</script>

 

 

 

 

4️⃣ 자동 subscribe 사용하기

해당 기능을 사용하면 별도의 함수로 subscribe를 해제할 필요가 없어지며,

$cartItems를 하면 자동으로 subscribe가 실행되고 DOM에서 컴포넌트가 제거될 때 자동으로 해제된다.

 

또한, 이 방법은 3️⃣보다 간결하게 작성할 수 있지만, 마크업에 사용하기 전에 데이터를 변환하거나 어떤 조작이 필요할 때 3️⃣의 방법을 작성하도록 하자.

<!-- cart.svelte -->
<script>
    import { onDestroy } form 'svelte';
    import cartItems from './cart-store.js'; // cartItems 자리에는 원하는 이름을 쓰면 된다.
</script>

<section>
    <h1>Cart</h1>
    <ul>
        {#each $cartItems as item (item.id)}
            <CartItem id={item.id} title={item.title} price={item.price} />
        {:else}
            <p>No items in cart yet!</p>
        {/each}
    </ul>
</section>