코드를 작성할 때, 코드의 재사용성은 매우 중요한 요소입니다. 반복적인 코드 작성을 피하고, 코드의 유지 보수성을 높이기 위해 코드 재사용성을 고려해야 합니다. 이때 MobX 라이브러리는 매우 유용한 도구가 될 수 있습니다.

MobX는 효과적인 상태 관리와 반응형 프로그래밍을 위해 설계된 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 상태 변화에 따라 자동으로 업데이트되는 UI를 쉽게 구현할 수 있습니다. 이를 통해 코드의 재사용성이 대폭 향상될 수 있습니다.

MobX를 사용하여 코드의 재사용성을 높이기 위해 몇 가지 방법을 살펴보겠습니다.

1. Store 구성

MobX에서는 상태를 보관하고 관리하는 데 사용되는 Store라는 개념이 있습니다. 여러 컴포넌트에서 공유되는 상태를 Store에 저장하고, 필요한 곳에서 해당 Store를 불러와 사용함으로써 코드의 재사용성을 높일 수 있습니다.

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

class TodoStore {
  todos = [];

  constructor() {
    makeObservable(this, {
      todos: observable,
      addTodo: action
    });
  }

  addTodo(todo) {
    this.todos.push(todo);
  }
}

const todoStore = new TodoStore();
export default todoStore;

위의 예제에서는 TodoStore라는 Store를 정의하고, todos 배열을 상태로 관리하며, addTodo 메소드를 통해 todos에 항목을 추가하는 코드입니다. 이 Store를 다른 컴포넌트에서 불러와 사용하면, 동일한 상태 및 메소드를 재사용할 수 있습니다.

2. 컴포넌트 재사용

MobX는 컴포넌트에서의 상태 변화를 감지하여 자동으로 업데이트해주는 기능을 제공합니다. 이를 통해 컴포넌트의 재사용성을 높일 수 있습니다.

import { observer } from 'mobx-react';
import todoStore from './todoStore';

const TodoList = observer(() => {
  return (
    <ul>
      {todoStore.todos.map((todo, index) => (
        <li key={index}>{todo}</li>
      ))}
    </ul>
  );
});

export default TodoList;

위의 예제에서는 TodoList라는 컴포넌트를 정의하고, todoStore에서 가져온 todos 배열을 렌더링하는 코드입니다. 이 컴포넌트는 todoStore의 todos 배열이 업데이트될 때마다 자동으로 렌더링되므로, 해당 컴포넌트를 다른 곳에서 재사용할 때도 일관된 상태를 유지할 수 있습니다.

3. 컴포넌트 분리

컴포넌트를 작은 단위로 분리하여 재사용성을 높일 수도 있습니다. MobX는 상태 및 메소드를 Store에 저장하고, 이를 다양한 컴포넌트에서 사용할 수 있도록 하는 기능을 제공합니다.

import { observer } from 'mobx-react';
import todoStore from './todoStore';

const TodoForm = observer(() => {
  const [newTodo, setNewTodo] = useState('');

  const addTodo = () => {
    todoStore.addTodo(newTodo);
    setNewTodo('');
  };

  return (
    <div>
      <input type="text" value={newTodo} onChange={(e) => setNewTodo(e.target.value)} />
      <button onClick={addTodo}>Add</button>
    </div>
  );
});

export default TodoForm;

위의 예제에서는 TodoForm 컴포넌트를 정의하고, 입력값을 받아 todoStore의 addTodo 메소드를 호출하여 새로운 todo를 추가하는 코드입니다. 이렇게 작은 단위로 분리된 컴포넌트를 다른 곳에서 재사용할 수 있으며, 동일한 상태 및 메소드를 공유하여 일관성을 유지할 수 있습니다.

결론

MobX는 상태 관리와 반응형 프로그래밍을 간편하게 해주는 강력한 도구입니다. 이 라이브러리를 사용하여 코드의 재사용성을 높일 수 있으며, 상태 관리를 효과적으로 할 수 있습니다. MobX를 활용하여 코드를 작성할 때, 상태를 공유하는 Store를 사용하고, 컴포넌트를 재사용 가능한 단위로 분리하는 등의 방법을 활용해보세요.

참고:

• MobX 공식 문서
• MobX GitHub