상태 관리 심화 (MobX 등)

1. 도입 (왜 배워야 하는가)

현대의 웹 애플리케이션은 사용자와의 상호작용이 매우 빈번하며, 이로 인해 상태 관리의 중요성이 갈수록 커지고 있습니다. 상태 관리란 애플리케이션의 데이터와 UI 상태를 효율적으로 관리하는 방법을 의미합니다. MobX는 이러한 상태 관리를 더욱 쉽게 만들어주는 라이브러리 중 하나입니다. 이를 통해 애플리케이션의 구조를 명확히 하고, 코드의 가독성을 높이며, 성능을 최적화할 수 있습니다.

상태 관리를 소홀히 하면 데이터의 흐름이 복잡해지며, 예기치 않은 버그가 발생할 수 있습니다. 예를 들어, 사용자 인터페이스가 데이터 변경에 반응하지 않거나, 데이터가 비동기적으로 로드되는 경우 UI와 데이터 간의 싱크가 깨져서 사용자 경험을 해칠 수 있습니다.

2. 핵심 개념 설명

MobX란?

MobX는 상태 관리를 위한 라이브러리로, 데이터의 상태를 관찰하고 반응하는 방식으로 작동합니다. 이를 통해 애플리케이션의 상태를 간단하게 관리하고, 필요한 경우에만 UI를 업데이트할 수 있습니다.

주요 용어 정리

상태가 변화하는 과정을 '주방에서 요리하는 과정'에 비유할 수 있습니다. 주방의 모든 재료(Observable)가 요리사(Observer)에 의해 조리(Action)되고, 요리가 완성된 결과(Computed)가 나온다고 생각하면 이해가 쉽습니다.

3. 기본 코드 예제

기본적인 MobX 사용법을 보여주는 코드입니다.

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

class Store {
    count = 0;

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

    increment() {
        this.count++;
    }
}

const store = new Store();
console.log(store.count); // 0
store.increment();
console.log(store.count); // 1

• import { observable, action, makeObservable } from 'mobx'; : MobX에서 필요한 메서드를 가져옵니다.
• class Store { ... } : 상태를 관리할 클래스를 정의합니다.
• count = 0; : 상태를 나타내는 속성을 초기화합니다.
• constructor() { makeObservable(this, { count: observable, increment: action }); } : 상태와 메서드를 Observable로 설정합니다.
• increment() { this.count++; } : 상태를 변경하는 메서드입니다.
• const store = new Store(); : Store 인스턴스를 생성합니다.
• console.log(store.count); // 0 : 초기 상태를 출력합니다.
• store.increment(); : 상태를 변경하는 메서드를 호출합니다.
• console.log(store.count); // 1 : 변경된 상태를 출력합니다.

4. 실전 활용 예제

예제 1: 쇼핑몰 장바구니 구현

쇼핑몰에서 장바구니에 상품을 추가할 때 MobX를 활용하여 장바구니 상태를 관리할 수 있습니다.

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

class CartStore {
    items = [];

    constructor() {
        makeObservable(this, {
            items: observable,
            addItem: action,
        });
    }

    addItem(item) {
        this.items.push(item);
    }
}

const cart = new CartStore();
cart.addItem({ id: 1, name: '상품1' });
console.log(cart.items); // [{ id: 1, name: '상품1' }]

예제 2: 사용자 프로필 업데이트

사용자의 프로필 정보를 관리할 때 MobX를 사용할 수 있습니다.

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

class UserProfile {
    name = '';
    age = 0;

    constructor() {
        makeObservable(this, {
            name: observable,
            age: observable,
            updateProfile: action,
        });
    }

    updateProfile(name, age) {
        this.name = name;
        this.age = age;
    }
}

const userProfile = new UserProfile();
userProfile.updateProfile('홍길동', 30);
console.log(userProfile.name, userProfile.age); // 홍길동 30

5. 흔한 실수와 주의사항

실수 1: Observable 속성 누락

class Store {
    count; // Observable로 선언하지 않음
    constructor() {
        makeObservable(this, {
            increment: action // Observable 속성 누락
        });
    }
}

올바른 코드:

class Store {
    count = 0; // Observable로 선언
    constructor() {
        makeObservable(this, {
            count: observable, // Observable로 설정
            increment: action
        });
    }
}

실수 2: Action에서 상태 업데이트 누락

class Store {
    count = 0;
    constructor() {
        makeObservable(this, {
            count: observable,
            increment: action // 잘못된 사용
        });
    }

    increment() {
        this.count++; // Action으로 선언하지 않았음
    }
}

올바른 코드:

class Store {
    count = 0;
    constructor() {
        makeObservable(this, {
            count: observable,
            increment: action // 올바른 사용
        });
    }

    increment() {
        this.count++; // Action으로 정상 작동
    }
}

6. 정리

• MobX는 상태 관리를 간편하게 도와주는 라이브러리입니다.
• Observable, Observer, Action, Computed와 같은 개념을 이해하고 활용해야 합니다.
• 상태 관리의 중요성을 고려하여 애플리케이션 구조를 명확히 해야 합니다.
• 다음에 학습하면 좋은 주제로는 React와 MobX의 통합 사용, 상태 관리의 대안 라이브러리(예: Redux) 등을 추천합니다.