React 상태 관리, MobX로 깔끔하게! 복잡함은 줄이고 반응성은 높이는 비결

React 애플리케이션 개발에서 상태 관리는 마치 건물의 기초 공사처럼 핵심적입니다. 앱이 커지면서 컴포넌트들이 서로 상태를 공유하고 실시간으로 반응해야 할 때, 이 기초가 약하면 전체 시스템이 무너질 수 있어요. 많은 개발자들이 이 단계에서 좌절하거나, 복잡한 로직에 빠져 시간을 낭비하곤 합니다. 하지만 걱정 마세요! MobX가 이 문제를 우아하게 해결해줍니다. MobX는 상태 관리의 부담을 줄이고, 개발자가 본질적인 비즈니스 로직에 집중할 수 있도록 돕는 강력한 도구입니다. 이 글에서는 MobX의 기본부터 실전 적용 팁까지 자세히 알아보겠습니다.

MobX란 무엇인가? 반응형 프로그래밍의 마법

MobX는 React 앱의 상태를 간소화하기 위해 만들어진 라이브러리입니다. 그 핵심은 반응성(reactivity) 입니다. 간단히 말해, MobX는 앱의 상태를 '관찰 가능한 데이터 구조'로 변환해, 데이터가 바뀌면 자동으로 의존하는 모든 UI 컴포넌트가 업데이트되도록 합니다. 개발자가 상태 변경을 수동으로 추적하거나 UI를 동기화하는 코드를 작성할 필요가 없어요. 마치 마법처럼, 데이터가 변하면 UI가 즉시 따라옵니다!

예를 들어, 카운터 앱에서 숫자가 증가할 때마다 화면이 자동으로 갱신되는 걸 상상해보세요. Redux처럼 boilerplate 코드가 많지 않고, 직관적입니다. MobX는 2015년부터 인기 있는 라이브러리로, 지금도 대규모 프로젝트(예: Microsoft Office 웹 앱)에서 활발히 사용되고 있어요.

728x90

MobX의 핵심 개념 4가지: 마법의 재료들

MobX의 반응성을 이해하려면 네 가지 핵심 개념을 알아야 합니다. 이 요소들이 MobX의 강력한 기반을 이룹니다. 각 개념에 간단한 코드 예시를 추가해 보았어요.

1. 관찰 가능 항목 (Observables)

MobX의 심장부입니다. 상태를 관찰 가능하게 만들어 변경을 자동 추적합니다. 객체, 배열, 원시 값 등 모든 데이터에 적용할 수 있어요.

import { makeAutoObservable } from 'mobx';

class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);  // 모든 속성을 자동으로 observable로 만듦
  }
}

이제 count가 변경되면 이를 사용하는 컴포넌트가 자동 재렌더링됩니다.

2. 액션 (Actions)

상태를 수정하는 유일한 방법입니다. 함수를 액션으로 정의하면 변경이 예측 가능해지고, 디버깅이 쉬워집니다.

class CounterStore {
  // ... (위와 동일)

  increment() {
    this.count++;  // 이 함수가 액션이 됨
  }

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

increment() 호출 시 상태가 안전하게 업데이트됩니다.

3. 계산된 값 (Computed Values)

관찰 가능 항목에서 파생된 값을 자동 계산합니다. 의존 데이터가 변할 때만 재계산되어 효율적입니다. 데이터 중복을 피하고 파생 상태를 관리하기 딱이에요.

import { computed } from 'mobx';

class CounterStore {
  // ... (위와 동일)

  @computed get doubledCount() {
    return this.count * 2;  // count가 변할 때만 재계산
  }
}

doubledCount를 사용하면 count 변경 시 자동으로 업데이트됩니다.

4. 반응 (Reactions)

상태 변경에 따른 부작용(side effect)을 처리합니다. UI 업데이트 외에 로깅, API 호출 등을 트리거할 수 있어요.

import { autorun } from 'mobx';

const store = new CounterStore();

autorun(() => {
  console.log(`Current count: ${store.count}`);  // count 변경 시마다 실행
});

이 코드는 count가 변할 때마다 콘솔에 로그를 출력합니다. 비동기 작업이나 데이터 동기화에 유용하죠.

React에서 MobX를 효과적으로 사용하는 단계

이제 이 개념들을 React 앱에 적용해 보죠. 간단한 카운터 앱을 예로 들어 단계별로 설명하겠습니다. (필요한 패키지: mobx, mobx-react-lite)

1. 스토어 생성

중앙 상태를 담는 스토어를 만듭니다. 관찰 가능 항목, 액션, 계산된 값을 한 곳에 모읍니다.

// store.js
import { makeAutoObservable, computed } from 'mobx';

export class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }

  @computed get doubledCount() {
    return this.count * 2;
  }
}

2. 스토어 제공

Context API를 사용해 스토어를 컴포넌트 트리에 제공합니다. 하위 컴포넌트들이 쉽게 접근할 수 있어요.

// App.js
import React, { createContext, useContext } from 'react';
import { CounterStore } from './store';
import CounterComponent from './CounterComponent';

const StoreContext = createContext();

export const StoreProvider = ({ children }) => {
  const store = new CounterStore();
  return (
    <StoreContext.Provider value={store}>
      {children}
    </StoreContext.Provider>
  );
};

export const useStore = () => useContext(StoreContext);

3. 컴포넌트에서 관찰 가능 항목 사용

observer 훅으로 컴포넌트를 래핑해 상태 변경에 반응하도록 합니다.

// CounterComponent.js
import React from 'react';
import { observer } from 'mobx-react-lite';
import { useStore } from './App';

const CounterComponent = observer(() => {
  const store = useStore();

  return (
    <div>
      <p>Count: {store.count}</p>
      <p>Doubled: {store.doubledCount}</p>
      <button onClick={() => store.increment()}>Increment</button>
      <button onClick={() => store.decrement()}>Decrement</button>
    </div>
  );
});

export default CounterComponent;

버튼 클릭 시 count가 변경되고, observer가 이를 감지해 UI를 자동 업데이트합니다. setState 호출 없이도 마법처럼 동작하죠!

MobX 사용의 매력적인 이점들

MobX를 도입하면 여러 이점을 누릴 수 있습니다:

• 간소함 및 최소한의 상용구 코드: Redux처럼 리듀서나 미들웨어를 복잡하게 설정할 필요가 없어요. 코드가 적고 가독성이 높아 개발 속도가 빨라집니다.
• 자동 종속성 추적: MobX가 상태 의존성을 자동으로 파악해 수동 지정이 불필요합니다. 버그를 줄이고 유지보수가 쉽습니다.
• 성능 최적화: 변경된 상태에만 의존하는 컴포넌트만 재렌더링됩니다. 대규모 앱에서 불필요한 렌더링을 최소화해 부드러운 UX를 제공하죠.
• 유연성: 클래스나 함수형 스토어 모두 지원하며, TypeScript와 잘 어울립니다. 테스트도 직관적입니다.

결론: MobX와 함께 반응형 React 앱의 미래를 경험하세요

MobX는 반응형 프로그래밍과 직관적인 API로 React의 복잡한 상태를 우아하게 관리합니다. 관찰 가능 항목, 액션, 계산된 값, 반응을 활용하면 비즈니스 로직과 UI를 깔끔하게 분리할 수 있어요. Context API나 커스텀 훅과 결합하면 대규모 아키텍처에서도 빛을 발합니다.