[javascript] MobX와 반응형 UI

04 Dec 2023

javascript

이번 블로그에서는 MobX를 사용하여 반응형 UI를 구현하는 방법에 대해 알아보겠습니다.

MobX란

MobX는 JavaScript 상태 관리 라이브러리로서, 애플리케이션의 상태를 중앙에서 관리하고 해당 상태의 변화에 따라 자동으로 UI를 업데이트할 수 있도록 도와줍니다. MobX는 간단하고 직관적인 문법으로 상태 관리를 할 수 있기 때문에 많은 개발자들이 사용하고 있습니다.

MobX의 주요 개념

Observable: MobX에서 상태를 관찰할 수 있도록 만들어주는 데코레이터입니다. @observable을 사용하여 변수를 Observable로 만들 수 있습니다.
Observer: MobX에서 관찰 대상이 되는 컴포넌트입니다. @observer를 사용하여 컴포넌트를 Observer로 만들 수 있습니다.
Action: MobX에서 상태 변화를 일으키는 메서드입니다. @action을 사용하여 메서드를 Action으로 만들 수 있습니다.
Computed: MobX에서 파생된 상태를 만드는 데 사용되는 속성입니다. @computed를 사용하여 계산된 값을 만들 수 있습니다.

MobX를 이용한 반응형 UI 구현

MobX를 이용하여 반응형 UI를 구현하는 방법은 다음과 같습니다.

상태를 Observable로 만듭니다. ```javascript import { observable } from ‘mobx’;

class TodoStore { @observable todos = []; }

const store = new TodoStore();

2. Observer 컴포넌트를 만들고 필요한 상태를 사용합니다.
```javascript
import React from 'react';
import { observer } from 'mobx-react';

const TodoList = observer(() => {
  const { todos } = store;

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
});

Action을 사용하여 상태를 변경합니다. ```javascript import { action } from ‘mobx’;

class TodoStore { …

@action addTodo = (text) => { this.todos.push({ id: Date.now(), text }); } }

store.addTodo(‘Buy groceries’);

4. Computed를 사용하여 파생된 상태를 만듭니다.
```javascript
import { computed } from 'mobx';

class TodoStore {
  ...

  @computed
  get completedTodos() {
    return this.todos.filter(todo => todo.completed);
  }
}

결론

MobX를 사용하면 쉽게 반응형 UI를 구현할 수 있습니다. MobX의 Observable, Observer, Action, Computed 개념을 잘 이해하면 상태 관리를 효과적으로 할 수 있습니다. 이 블로그 포스트를 통해 MobX를 처음 접하는 사람들도 쉽게 이해하고 사용할 수 있기를 바랍니다.

목차

MobX란

MobX의 주요 개념

MobX를 이용한 반응형 UI 구현

결론