Svelte Store (전역 상태 관리)

React를 만져본 분이라면 Redux, Recoil, ContextApi 등 컴포넌트 별로 상태값을 전달 하는게 아닌 컴포넌트들과 동 떨어져 있는 한 장소에서 값을 관리하여 props를 통해 애써서 컴포넌트 별로 전달하고 받을 필요가 없어지는 것이다. 

 

 

 

위 사진은 7번 컴포에서 10번 컴포로 props를 통해 값이 변하는것을 전달하는 과정인데 규모가 그리 크지 않음에도 벌써 귀찮을 거 같은 느낌이 든다.

 

 

 

Store와 같은 전역 상태 관리 도구를 썻을 때 단계이다. 쇽쇽쇽쇽쇽쇽에서 쇽쇽으로 바꼇다. 이것만 봐도 애용해야 될 이유는 충분하다. 

 

사용하기 위해서는 우선

 

* store로 사용할 파일(저장소)를 만드는 것이다. 

 

 

먼저 countStore.js 코드를 살펴보면

import {writable} from "svelte/store";

export const count = writable(0);  //슈퍼 간단

 

여기서 사용할 4개의 컴포넌트 코드를 살펴보면

 

Main.svelte   (App.svelte에서 가져갈 총합 페이지)

<script>
    import Decrement from "./Decrement.svelte";
    import Increment from "./Increment.svelte";
    import Result from "./Result.svelte";
</script>

<Decrement />    // no props
<Increment />    // no props
<Result />       // no props

 

Increment.svelte 

<script>
    import {count} from "../store/countStore.js";

    const onIncre = () =>{
        $count = $count + 1;   // store에서 가져온 값은 $표시를 붙여야 한다. 사용법 끝
    }
</script>

<button on:click={onIncre}>
    +
</button>

 

Result.svelte

<script>
    import {count} from "../store/countStore.js";
</script>

<div>count 값 : {$count}</div>  // 말했듯이 $ 표시

 

이렇게 하면 store를 사용 하는 방법 중 1가지를 알게 된 것이고 조금 더 오류를 줄이고 재사용성 있게 사용하는 방법은 외부 컴포넌트에서 count 값을 컨트롤하는게 아닌 store에서 관리 하는 것인데 

 

바뀐 store.js 파일을 보면

 

import {writable} from "svelte/store";

function createCountStore() {
    const {subscribe, set, update} = writable(0); 

    const increment = () => update(count => count + 1); 
    const decrement = () => update(count => count - 1);
    const reset = () => set(0);

    return{
        subscribe,
        increment,
        decrement,
        reset
    }
}

export const count = createCountStore()

 

Increment.svelte

 

<script>
    import {count} from "../store/countStore.js";

    const onIncre = () =>{
        count.increment();  // 꺼내쓰면 된다.
    }
</script>

<button on:click={onIncre}>
    +
</button>

 

관리포인트가 바뀐 것을 볼 수 있다.