MobX는 상태 관리 라이브러리로, 리액트 애플리케이션과 타입스크립트 프로젝트에서 데이터를 효율적으로 관리할 수 있습니다. 이번 블로그에서는 MobX와 타입스크립트를 함께 사용하여 데이터를 로컬 스토리지에 저장하는 방법을 살펴보겠습니다.

MobX와 타입스크립트

MobX를 타입스크립트와 함께 사용하면, 데이터의 상태 변화를 쉽게 추적하고 관리할 수 있습니다. MobX는 관찰 가능한 상태(observable state)와 반응형 액션(reaction)을 활용하여 애플리케이션의 상태 변화를 관리하는 데 도움이 됩니다.

데이터 로컬 스토리지 저장 방법

1. MobX 상태 클래스 생성

먼저, 데이터 모델에 해당하는 MobX 상태 클래스를 정의합니다. 타입스크립트를 사용하여 클래스의 속성들을 정의할 수 있습니다.

import { action, makeObservable, observable } from 'mobx';

class AppStore {
  @observable data: string = '';

  constructor() {
    makeObservable(this);
  }

  @action
  updateData(newData: string) {
    this.data = newData;
  }
}

export default new AppStore();

2. 로컬 스토리지와 상태 클래스 연동

다음으로, MobX 상태 클래스를 로컬 스토리지와 연동하여 데이터를 저장하고 불러올 수 있도록 합니다.

import { autorun } from 'mobx';

autorun(() => {
  const data = JSON.stringify(appStore.data);
  localStorage.setItem('appData', data);
});

3. 애플리케이션 초기화

마지막으로, 애플리케이션이 초기화될 때 로컬 스토리지에 저장된 데이터를 가져와 MobX 상태 클래스에 적용합니다.

const savedData = localStorage.getItem('appData');
if (savedData) {
  appStore.updateData(JSON.parse(savedData));
}

결론

MobX와 타입스크립트를 함께 사용하여 데이터를 로컬 스토리지에 저장하는 방법을 살펴보았습니다. 이를 통해 애플리케이션의 상태를 유지하고, 다시 불러올 수 있어 사용자 경험을 향상시킬 수 있습니다.

위의 예시는 MobX와 타입스크립트를 기반으로한 상태 관리 방법을 간략히 보여주기 위한 것으로, 실제 프로젝트에서는 보다 복잡한 상황에 맞게 적용되어야 합니다.