12.MobX로 배우는 간단한 상태 관리: 직관적이고 강력한 React 상태 관리 도구

"MobX로 배우는 간단한 상태 관리: 직관적이고 강력한 React 상태 관리 도구"

---

1시간 분량 강의안 (MobX 기초)

강의 목표

1. MobX의 개념과 장점을 이해한다.
2. MobX의 주요 개념(Observable, Action, Computed, Observer)을 학습한다.
3. MobX를 활용하여 React 애플리케이션에서 상태를 관리하는 방법을 익힌다.

---

강의 목차

---

1. MobX란 무엇인가? (10분)

MobX의 정의

• MobX는 간단하고 직관적인 상태 관리 라이브러리입니다.
• React 애플리케이션에서 상태를 관리하고 UI를 자동으로 업데이트합니다.

MobX의 주요 특징

1. 반응성(Reactivity): 상태가 변경되면 자동으로 관련된 UI를 업데이트.
2. 직관적 API: 상태를 관리하는 방법이 간단하며 코드가 읽기 쉽다.
3. 유연성: Redux와 달리 불변성을 강제하지 않아 상태를 자유롭게 수정 가능.

MobX의 주요 구성 요소

1. Observable: 상태를 반응형 데이터로 정의.
2. Action: 상태를 변경하는 함수.
3. Computed: 상태에서 파생된 값을 생성.
4. Observer: 상태 변경을 감지하여 UI를 업데이트하는 React 컴포넌트.

---

2. MobX 설치 및 기본 설정 (10분)

1단계: MobX 설치

1. MobX와 React 통합 패키지 설치:
    

npm install mobx mobx-react-lite

2단계: 프로젝트 구조

• 기본 폴더 구조:

src/
├── stores/
│   └── counterStore.js
├── components/
│   └── Counter.js
└── App.js

---

3. MobX 주요 개념 및 구현 (20분)

1단계: Observable

• 상태를 관찰 가능한 데이터로 정의:

import { makeAutoObservable } from 'mobx';

class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this); // 상태를 자동으로 관찰 가능하도록 설정
  }

  increment() {
    this.count++;
  }

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

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

2단계: Observer

• React 컴포넌트를 상태 변경에 반응하도록 설정:

import React from 'react';
import { observer } from 'mobx-react-lite';
import counterStore from '../stores/counterStore';

const Counter = observer(() => {
  return (
    <div>
      <p>Count: {counterStore.count}</p>
      <button onClick={() => counterStore.increment()}>Increment</button>
      <button onClick={() => counterStore.decrement()}>Decrement</button>
    </div>
  );
});

export default Counter;

3단계: App 컴포넌트에서 사용

import React from 'react';
import Counter from './components/Counter';

function App() {
  return (
    <div>
      <h1>MobX Counter</h1>
      <Counter />
    </div>
  );
}

export default App;

---

4. 고급 MobX 기능 (10분)

1단계: Computed

• 상태에서 파생된 값을 생성:

  get isPositive() {
    return this.count > 0;
  }

• React 컴포넌트에서 사용:

  <p>{counterStore.isPositive ? "Positive" : "Negative or Zero"}</p>
  

   

2단계: Action

• 상태를 변경하는 메서드에 Action을 명시적으로 추가: 

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

class CounterStore {
  count = 0;

  constructor() {
    makeObservable(this, {
      count: observable,
      increment: action,
      decrement: action,
    });
  }

  increment() {
    this.count++;
  }

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

---

5. 실습 과제 (10분)

실습 과제

1. MobX를 사용하여 카운터 애플리케이션을 구현하세요.
2. 버튼 클릭으로 숫자를 증가/감소하고, 숫자가 0보다 작아지지 않도록 제한하세요.
3. isPositive를 Computed로 구현하여 상태가 양수인지 여부를 화면에 표시하세요.

예제

decrement() {
  if (this.count > 0) {
    this.count--;
  }
}

---

6. Q&A 및 정리 (10분)

• Q&A:
  1. MobX와 Redux의 차이점은 무엇인가요?
  2. 작은 프로젝트에서 MobX는 적합한 선택인가요?
• 요약:
  • MobX는 React 애플리케이션에서 간단하고 직관적인 상태 관리를 제공합니다.
  • Observable, Action, Computed, Observer는 MobX의 핵심 개념입니다.
  • MobX는 상태를 효율적으로 관리하며, 작은 프로젝트에서 특히 유용합니다.