[javascript] MobX와 스벨트

04 Dec 2023

javascript

스벨트(Svelte)는 최신 웹 프레임워크로, 사용자 인터페이스를 작성하기 위한 도구입니다. 스벨트는 가볍고 성능이 뛰어나며, 컴파일 시간에 코드를 최적화하는 고유한 방식으로 동작합니다. MobX는 상태 관리 라이브러리로, 상태 변화를 추적하고 자동으로 UI를 업데이트하는 데 사용됩니다.

스벨트와 MobX를 함께 사용하는 방법에 대해 알아보겠습니다.

MobX 설치

먼저 MobX를 설치해야 합니다. 이를 위해 다음 명령을 사용합니다:

npm install mobx mobx-svelte

MobX 사용하기

MobX를 사용하기 위해서는 store.js와 같이 상태를 관리하는 스토어를 생성해야 합니다. 스토어는 observable 데코레이터를 사용하여 관찰 가능한 상태로 만들 수 있습니다.

import { observable } from 'mobx';

export class Store {
  @observable count = 0;

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

export const store = new Store();

MobX 스벨트 연동하기

스벨트에서 MobX를 사용하려면 MobX 스벨트 라이브러리를 가져와야 합니다. 그러면 onMount 훅을 사용하여 스토어를 생성하고 구독할 수 있습니다.

import { onMount } from 'svelte';
import { get, set } from 'mobx-svelte';
import { store } from './store';

let count;

onMount(() => {
  count = get(store, 'count');
});

function increment() {
  store.increment();
}

function decrement() {
  store.decrement();
}

set(store, 'count', count);

마지막으로 App.svelte 파일에서 상태와 이벤트를 연결할 수 있습니다.

<script>
  import { count, increment, decrement } from './store.js';
</script>

<main>
  <h1>{count}</h1>
  <button on:click={increment}>증가</button>
  <button on:click={decrement}>감소</button>
</main>

위의 코드에서 count는 스토어의 count 상태를 나타냅니다. increment와 decrement 함수는 스토어의 메서드를 호출합니다.

결론

이제 MobX와 스벨트를 함께 사용하는 방법에 대해 알아보았습니다. MobX를 사용하면 상태 관리가 간편해지며, 스벨트의 성능도 향상됩니다. 모든 개발자에게 추천합니다.

MobX 설치

MobX 사용하기

MobX 스벨트 연동하기

결론

참고 자료