[javascript] MobX와 로컬 스토리지 연동

04 Dec 2023

javascript

이번 포스트에서는 MobX와 로컬 스토리지를 연동하여 상태 관리를 해보겠습니다. MobX는 JavaScript 상태 관리 라이브러리로, 애플리케이션의 상태를 관리하고 반응형으로 업데이트할 수 있도록 도와줍니다. 로컬 스토리지는 웹 브라우저에서 데이터를 지속성 있게 저장하기 위한 방법 중 하나입니다.

MobX 설치 및 설정

먼저 MobX를 설치해야 합니다. NPM을 사용하는 경우, 다음 명령어를 사용하여 설치할 수 있습니다:

npm install mobx
npm install mobx-react

이후, MobX를 사용하기 위해 애플리케이션의 상위 컴포넌트에서 mobx-react의 Provider 컴포넌트를 사용하여 MobX 스토어를 제공해야 합니다. 다음과 같이 코드를 작성해보겠습니다:

import { Provider } from 'mobx-react';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

MobX 스토어 생성

MobX 스토어는 애플리케이션의 상태와 해당 상태를 변경하는 액션 메서드를 정의하는 곳입니다. 다음은 간단한 MobX 스토어의 예제입니다:

import { observable, action } from 'mobx';

class CounterStore {
  @observable count = 0;

  @action increment() {
    this.count++;
  }

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

const store = new CounterStore();
export default store;

위의 예제에서는 count라는 observable 상태와 increment, decrement 라는 액션 메서드를 가진 CounterStore 클래스를 정의하고 있습니다.

로컬 스토리지와 MobX 연동

로컬 스토리지를 MobX와 연동하기 위해, MobX 스토어의 상태를 로컬 스토리지에 저장하고, 애플리케이션이 로드될 때 스토어에 해당 값을 반영해야 합니다. 다음과 같이 componentDidMount 메서드를 사용하여 로컬 스토리지와 MobX를 연동할 수 있습니다:

import { Component } from 'react';
import { observer, inject } from 'mobx-react';

@inject('store')
@observer
class App extends Component {
  componentDidMount() {
    const { store } = this.props;
    const count = localStorage.getItem('count');
    if (count) {
      store.count = parseInt(count);
    }

    autorun(() => {
      localStorage.setItem('count', store.count.toString());
    });
  }

  render() {
    const { store } = this.props;
    return (
      <div>
        <h1>{store.count}</h1>
        <button onClick={store.increment}>+</button>
        <button onClick={store.decrement}>-</button>
      </div>
    );
  }
}

export default App;

위의 예제에서는 componentDidMount 메서드에서 로컬 스토리지에서 count 값을 가져와 MobX 스토어의 count 값에 설정합니다. 또한, autorun 함수를 사용하여 count 값이 변경될 때마다 로컬 스토리지에 해당 값을 업데이트합니다.

이제 MobX와 로컬 스토리지가 연동되었으므로, 사용자가 + 또는 - 버튼을 클릭할 때마다 스토어의 상태가 업데이트되고, 해당 값이 로컬 스토리지에 저장됩니다.

이렇게 MobX와 로컬 스토리지를 연동하여 장기적으로 상태를 유지할 수 있습니다. 참고로, 로컬 스토리지에는 문자열 형태로만 값이 저장되므로 숫자 등 다른 자료형을 사용할 경우 적절한 형변환이 필요합니다.

결론

MobX를 사용하여 상태를 관리하는 애플리케이션에서 로컬 스토리지를 활용하면 사용자의 상태를 유지할 수 있습니다. MobX의 observable 및 action 데코레이터를 사용하여 상태와 상태를 변경하는 메서드를 정의하고, 로컬 스토리지를 사용하여 상태를 저장하고 불러오면 됩니다. 이를 통해 애플리케이션의 유지 관리의 부담을 줄이고, 사용자 경험을 향상시킬 수 있습니다.

MobX 설치 및 설정

MobX 스토어 생성

로컬 스토리지와 MobX 연동

결론

참고 자료