MobX는 JavaScript 애플리케이션의 상태 관리를 도와주는 라이브러리입니다. MobX의 주요 개념 중 하나는 Provider입니다. Provider는 MobX 스토어에 정의된 데이터를 React 컴포넌트에 주입하는 역할을 합니다. 이를 통해 컴포넌트는 상태를 간편하게 사용하고 업데이트할 수 있습니다.

프로바이더 기본 사용법

MobX에서 프로바이더를 사용하려면 다음과 같은 단계를 따르면 됩니다:

1. MobX 스토어를 생성하고 데이터와 관련된 액션 메서드를 정의합니다.
2. mobx-react 패키지를 설치합니다.
3. Provider 컴포넌트를 사용하여 MobX 스토어를 React 컴포넌트에 주입합니다.
4. 컴포넌트에서 MobX 스토어의 데이터와 액션을 사용합니다.

아래는 MobX의 프로바이더 사용 예시입니다.

// MobX 스토어 생성
import { observable, action } from 'mobx';

class TodoStore {
  @observable todos = [];

  @action addTodo = (todo) => {
    this.todos.push(todo);
  }
}

const todoStore = new TodoStore();

// 프로바이더 사용
import React from 'react';
import { Provider } from 'mobx-react';
import TodoList from './TodoList';

const App = () => {
  return (
    <Provider todoStore={todoStore}>
      <TodoList />
    </Provider>
  );
}

// TodoList 컴포넌트
import React from 'react';
import { inject, observer } from 'mobx-react';

const TodoList = inject('todoStore')(observer(({ todoStore }) => {
  const handleAddTodo = () => {
    todoStore.addTodo('New Todo');
  }

  return (
    <div>
      <button onClick={handleAddTodo}>Add Todo</button>
    </div>
  );
}));

export default TodoList;

위 예시에서는 TodoStore라는 MobX 스토어를 생성하고, addTodo라는 액션 메서드를 정의하였습니다. addTodo 함수를 통해 todos 배열에 새로운 항목을 추가할 수 있습니다.

그 후, Provider 컴포넌트를 사용하여 todoStore를 TodoList 컴포넌트에 주입하였습니다. 이를 위해 mobx-react 패키지의 inject와 observer 데코레이터를 사용하였습니다. inject('todoStore')를 통해 todoStore를 TodoList 컴포넌트의 props로 받을 수 있습니다.

TodoList 컴포넌트에서는 todoStore를 사용하여 handleAddTodo 함수를 구현하였습니다. 이 함수는 버튼을 클릭하면 todoStore.addTodo를 호출하여 새로운 Todo를 추가합니다.

이와 같이 MobX의 프로바이더를 사용하면 스토어의 데이터와 액션을 쉽게 컴포넌트에서 사용할 수 있습니다.