MobX를 활용한 React 컴포넌트의 로컬 상태 관리 기법 분석

2025-03-25 18:17:10

frontendreactmobxstate-management

MobX 로컬 상태 관리 - React의 경량화된 옵저버 패턴

MobX란?

MobX는 강력한 상태 관리 라이브러리로, 상태 동기화를 더욱 효율적이고 간단하게 만들어 줍니다. 대부분의 MobX 튜토리얼이 전역 상태 관리에 초점을 맞추지만, 컴포넌트 안의 로컬 옵저버블 상태 관리는 컴포넌트를 간소화하면서도 반응성을 유지시킬 수 있는 중요한 패턴입니다.

로컬 옵저버블 상태란 무엇인가?

로컬 옵저버블 상태는 전역으로 공유되지 않고 특정 컴포넌트 인스턴스에만 범위가 설정된 상태입니다. MobX의 makeObservable, makeAutoObservable 또는 observable을 사용해 컴포넌트 내부에서 생성할 수 있습니다.

import { makeAutoObservable } from 'mobx';
import { observer } from 'mobx-react-lite';

const Counter = observer(() => {
  const state = makeAutoObservable({
    count: 0,
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
    get double() {
      return this.count * 2;
    }
  });

  return (
    <div>
      <button onClick={state.decrement}>-</button>
      <span>{state.count}</span>
      <button onClick={state.increment}>+</button>
      <div>Double: {state.double}</div>
    </div>
  );
});

위 코드에서는 makeAutoObservable을 사용하여 Counter 컴포넌트의 상태를 관리합니다. 이처럼 간단히 로컬 상태를 설정함으로써 컴포넌트 내에서 모두 처리할 수 있습니다.

로컬 옵저버블 상태의 활용 시점

1. 컴포넌트-특정 상태

특정 컴포넌트나 그 자식에게만 유의미한 상태라면 로컬 옵저버블 상태를 사용함으로써 로직을 근접하게 유지하고 캡슐화할 수 있습니다.

2. 복잡한 로컬 상태

다중 상호의존 상태 값, 파생 값(계산 속성), 다중 상태 값을 수정하는 액션 등이 필요할 때 효과적입니다.

3. 폼 관리

여러 입력 필드, 유효성 검증, 복잡한 상호작용 패턴이 있는 경우 로컬 옵저버블 상태가 유용합니다.

const FormComponent = observer(() => {
  const form = makeAutoObservable({
    values: { name: '', email: '' },
    errors: {},
    get isValid() {
      return !Object.keys(this.errors).length;
    },
    setField(name, value) {
      this.values[name] = value;
      this.validateField(name);
    },
    validateField(name) {
      // 유효성 검증 로직
    },
    submit() {
      // 제출 로직
    }
  });

  return (
    <form onSubmit={form.submit}>
      <input
        value={form.values.name}
        onChange={(e) => form.setField('name', e.target.value)}
      />
      {/* 기타 필드 */}
    </form>
  );
});

로컬 옵저버블 상태를 선택해야 하는 이유

1. 캡슐화

상태와 로직을 사용하는 부분에 가깝게 유지하여 컴포넌트를 보다 독립적으로 만들고 이해하기 쉬워집니다.

2. 반응형 장점

MobX의 반응성을 글로벌 상태의 오버헤드 없이 얻을 수 있습니다.

3. 간결한 코드

파생값을 위한 useState와 useMemo 훅 사용을 제거할 수 있습니다. MobX가 이를 자동으로 관리합니다.

4. 테스트 용이성

전역 스토어와 연결되지 않으므로 고립된 상태에서 테스트가 용이합니다.

로컬 옵저버블 상태 사용 시 유의할 점

대체로 makeAutoObservable 사용 - 간결하고 자동으로 모든 것을 유추합니다.
적절히 초기화 - 컴포넌트 본문 내에서, 어떤 훅이나 콜백 외부에서 옵저버블을 생성합니다.
훅과의 결합도 고려:

const Component = observer(() => {
  const [externalData] = useState(/*...*/);
  const localState = useMemo(() => makeAutoObservable({ /*...*/ }), [externalData]);

  // ...
});

클래스 컴포넌트에서는 생성자에서 makeObservable을 사용합니다.
리액션이나 부작용 처리 시 반드시 해소(disposal) 설정:

useEffect(() => {
  const disposer = autorun(() => {
    // 리액션 로직
  });
  return () => disposer();
}, []);

로컬 옵저버블 상태 사용을 피해야 할 경우

상태를 앱 전반에 널리 공유해야 하는 경우 - 이러한 경우 전역 스토어가 더 적합합니다.
매우 간단한 상태 - 간단한 경우라면 useState가 충분할 것입니다.
서버-사이드 렌더링 - 서버와 클라이언트 사이에 상태가 지속되지 않기 때문에 주의해야 합니다.

결론

MobX 로컬 옵저버블 상태를 활용한 옵저버 컴포넌트는 단순한 useState와 전체 전역 상태 관리 사이에서 강력한 중간 지점을 제공합니다. 이는 복잡한 컴포넌트 상태, 폼, 글로벌 상태의 오버헤드 없이 반응형 업데이트를 필요로 할 때 매우 유용합니다. 로컬 옵저버블 상태를 언제 어떻게 효과적으로 사용해야 하는지를 이해한다면 MobX로 더 유지보수가 원활하며 반응적인 React 컴포넌트를 작성할 수 있습니다.

R_11