MobX6

📚 MobX6 기준 기능 정리

 

1. observable

✅ 설명

• 상태값으로 관리할 프로퍼티.
• 값이 바뀌면 MobX가 감지하고, 관련된 리액션이 자동 실행.
• 기본적으로 deep observable로 동작 (객체/배열 내부까지 추적).

✅ 예시

class Store {
    name = '초기값';
    items = [];

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

---

2. observable.ref

✅ 설명

• 객체/배열의 참조만 추적하고, 내부 속성은 추적하지 않음.
• 성능 최적화용 (깊은 구조가 불필요할 때).

✅ 예시

class Store {
    data = { a: 1, b: 2 };

    constructor() {
        makeObservable(this, {
            data: observable.ref,
        });
    }
}

data.a = 3은 MobX 반응형 업데이트 안 됨.

---

3. observable.shallow

✅ 설명

• 배열/객체의 최상위 레벨까지만 추적.
• 내부 요소 변경은 감지하지 않음.

✅ 예시

class Store {
    list = [{ id: 1 }, { id: 2 }];

    constructor() {
        makeObservable(this, {
            list: observable.shallow,
        });
    }
}

list.push({ id: 3 })는 감지하지만, list[0].id = 99는 감지 안 됨.

---

4. observable.struct

✅ 설명

• 값 변경 감지 시, 참조 비교가 아닌 내용 비교로 판단.
• 같은 내용이면 "동일 값"으로 취급.

✅ 예시

class Store {
    position = { x: 0, y: 0 };

    constructor() {
        makeObservable(this, {
            position: observable.struct,
        });
    }
}

{x: 0, y: 0}으로 다시 설정해도 변경 안 된 걸로 인식.

---

5. action

✅ 설명

• 상태 변경 함수.
• 상태 변경은 원칙적으로 action 안에서 수행.
• MobX가 트랜잭션처럼 감싸고, 변경 로그도 남김.

✅ 예시

class Store {
    name = '초기값';

    constructor() {
        makeObservable(this, {
            setName: action,
        });
    }

    setName(newName: string) {
        this.name = newName;
    }
}

---

6. action.bound

✅ 설명

• 상태 변경 함수 + this 바인딩 고정.
• 이벤트 핸들러로 넘길 때 유용 (리액트에서 많이 씀).

✅ 예시

class Store {
    name = '';

    constructor() {
        makeObservable(this, {
            setName: action.bound,
        });
    }

    setName(newName: string) {
        this.name = newName;
    }
}

// React에서 사용 예
<button onClick={store.setName.bind(null, '홍길동')}>이름 변경</button>

---

7. flow

✅ 설명

• 비동기 작업을 MobX 상태 변경 흐름에 포함.
• 반드시 generator 함수로 작성해야 함 (function*).

✅ 예시

class Store {
    data = null;

    constructor() {
        makeObservable(this, {
            fetchData: flow,
        });
    }

    *fetchData() {
        const response = yield fetch('/api/data');
        const data = yield response.json();
        this.data = data;
    }
}

---

8. flow.bound

✅ 설명

• 비동기 작업 + this 바인딩 고정.
• 비동기 작업을 이벤트 핸들러로 넘길 때 유용.

✅ 예시

class Store {
    data = null;

    constructor() {
        makeObservable(this, {
            fetchData: flow.bound,
        });
    }

    *fetchData() {
        const response = yield fetch('/api/data');
        const data = yield response.json();
        this.data = data;
    }
}

// React 예시
<button onClick={store.fetchData}>데이터 불러오기</button>

---

9. computed

✅ 설명

• 계산된 값 (derived value).
• 의존하는 observable 값이 변경될 때만 재계산.
• 그 외엔 캐시된 값 반환 (성능 최적화).

✅ 예시

class Store {
    firstName = '길동';
    lastName = '홍';

    constructor() {
        makeObservable(this, {
            fullName: computed,
        });
    }

    get fullName() {
        return `${this.lastName} ${this.firstName}`;
    }
}

---

10. computed.struct

✅ 설명

• computed 결과의 변경 여부를 내용 비교로 판단.
• 내용이 같으면 새로 계산하지 않고 기존 값 재사용.

✅ 예시

class Store {
    coords = { x: 0, y: 0 };

    constructor() {
        makeObservable(this, {
            normalizedCoords: computed.struct,
        });
    }

    get normalizedCoords() {
        return { x: Math.round(this.coords.x), y: Math.round(this.coords.y) };
    }
}

---

✍️ makeAutoObservable

✅ 설명

• makeObservable를 자동화한 버전.
• 속성은 observable, getter는 computed, 메서드는 action으로 자동 설정.
• 90% 상황에서는 이걸로 충분.

✅ 예시

class Store {
    name = '';
    items = [];

    constructor() {
        makeAutoObservable(this);
    }

    setName(name: string) {
        this.name = name;
    }

    get itemCount() {
        return this.items.length;
    }
}

---

💡 추가: runInAction

✅ 설명

• 비동기 함수 안에서 일회성 상태 변경할 때 사용.
• 별도 action 메서드 안 만들고 바로 감싸는 용도.

✅ 예시

class Store {
    data = null;

    async fetchData() {
        const response = await fetch('/api/data');
        const data = await response.json();
        runInAction(() => {
            this.data = data;
        });
    }
}

---

📊 최종 요약표 (보완판)

키워드 설명 비고

observable	상태값	deep observable
observable.ref	참조만 추적	내부 변화 무시
observable.shallow	최상위만 추적	내부 깊이 무시
observable.struct	내용 비교	값 자체 비교
action	상태 변경 함수	동기 상태 변경
action.bound	상태 변경 함수 + this 고정	이벤트 핸들러 대응
flow	비동기 상태 변경	generator 기반
flow.bound	비동기 상태 변경 + this 고정	비동기 핸들러 대응
computed	계산된 값	캐싱됨
computed.struct	내용 비교된 계산 값	값 비교로 캐싱
makeAutoObservable	자동 설정	대부분 커버
runInAction	즉시 상태 변경	비동기 안에서 자주 사용

 

 

 

 

 

---

 

 

 

 

아래는 MobX 6 쓰면서 개발자들이 실무에서 많이 궁금해하거나, 꼭 알아둬야 하는 추가 설명/팁/패턴들입니다.
한 번에 정리해드리니, 필요하신 부분 말씀하시면 그 주제만 따로 예시+설명도 드릴 수 있어요.

---

📚 필요한 추가 설명 리스트 (MobX 6 기준)

---

1. makeAutoObservable vs makeObservable 언제 써야 하나?

✅ 요점

구분 추천 상황

makeAutoObservable	대부분의 간단한 스토어 (자동 설정으로 충분)
makeObservable	일부 속성은 shallow, ref, struct 등 세부 옵션 필요할 때

🔔 실무 기준 팁

• 단순 데이터 관리용 스토어는 makeAutoObservable.
• 성능 튜닝, 외부 데이터 연동이 필요한 스토어는 makeObservable.

---

2. runInAction 정확한 쓰임새

✅ 요점

• 비동기 함수에서 상태 변경할 때 runInAction으로 감싸주면, 따로 action 만들 필요 없음.
• 비동기 함수에서 여러 상태를 한 번에 업데이트할 때도 유용.

✅ 예시

async loadData() {
    const result = await fetchData();
    runInAction(() => {
        this.data = result.data;
        this.status = 'success';
    });
}

---

3. 비동기 처리 패턴 (flow vs async/await + runInAction)

✅ 요점

패턴 설명

flow	공식 권장, 상태 변경 자동 추적 (generator 기반)
async/await + runInAction	최신 코드 스타일, 기존 비동기 함수와 혼용 쉬움

✅ 추천

• 비동기 함수 자체를 MobX가 관리해야 하면 flow.
• 외부 유틸함수로 빼서 관리할 때는 async/await + runInAction.

---

4. 클래스 스토어 vs 함수형 스토어 비교

✅ 요점

구분 특징

클래스 스토어	전통적인 방식, OOP 스타일, 타입 안정성 높음
함수형 스토어 (Hooks + MobX)	함수형 컴포넌트에 최적화, 컴포넌트 내부에서 관리할 때 적합

✅ 실무 추천

• 전역 상태: 클래스 스토어
• 로컬 상태 (컴포넌트 전용): 함수형 스토어

---

5. 리액트에서 MobX 스토어 주입/사용 방법

✅ 요점

• Provider + useStore() 패턴 추천
• Context로 스토어 주입해서 전역 접근

✅ 예시

const StoreContext = createContext<RootStore | null>(null);

export const useStore = () => {
    const store = useContext(StoreContext);
    if (!store) throw new Error('Store is not provided');
    return store;
};

<StoreContext.Provider value={rootStore}>
    <App />
</StoreContext.Provider>

---

6. 리액트 컴포넌트에서 observable 값 사용하기

✅ 요점

• observer()로 감싸야 자동 반응.
• MobX 상태 바로 참조 가능.

✅ 예시

const ItemList = observer(() => {
    const { itemStore } = useStore();
    return (
        <ul>
            {itemStore.items.map((item) => (
                <li key={item.id}>{item.name}</li>
            ))}
        </ul>
    );
});

---

7. Devtools 세팅 및 활용법

✅ 요점

• MobX Devtools 활성화해서 상태 변경 추적.
• 크롬 확장프로그램 추천.

✅ 설치

npm install mobx-react-lite mobx-react-devtools

✅ 사용 예시

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

enableLogging({
    actions: true,
    reactions: true,
    transactions: true,
    compute: true,
});

---

8. MobX에서 외부 API 데이터 관리 패턴

✅ 요점

• 데이터 요청은 flow 또는 async 함수에서 진행.
• 상태 업데이트는 runInAction으로 감싸서 안전하게.

✅ 예시

class Store {
    items = [];
    isLoading = false;

    constructor() {
        makeAutoObservable(this);
    }

    async fetchItems() {
        this.isLoading = true;
        try {
            const response = await fetch('/api/items');
            const data = await response.json();
            runInAction(() => {
                this.items = data;
                this.isLoading = false;
            });
        } catch (error) {
            runInAction(() => {
                this.isLoading = false;
            });
        }
    }
}

---

9. computed 속성 성능 최적화 및 잘못 쓰는 경우

✅ 요점

• computed는 의존하는 observable이 안 바뀌면 캐시된 값 반환.
• getter 내부에서 observable 변경 시도하면 안 됨.

✅ 잘못된 예시

get doubledCount() {
    this.count++;  // ❌ computed에서 상태 변경 금지
    return this.count * 2;
}

---

10. 배열/객체 observable 관리 팁 (shallow, ref 차이)

✅ 요점

방식 설명

observable	깊은 구조 추적
shallow	최상위 레벨만 추적
ref	참조만 추적, 내부 변경 감지 안 함

✅ 실무 기준 선택 가이드

• 외부 API 응답 데이터: shallow
• 내부 관리 데이터: observable
• Immutable 데이터: ref

---

📊 한눈에 추가 설명 리스트

주제 설명 필요 여부 (✔️ 요청 가능)

makeAutoObservable vs makeObservable	✔️
runInAction 정확한 쓰임새	✔️
flow vs async/await 패턴 선택	✔️
클래스 스토어 vs 함수형 스토어	✔️
리액트에서 스토어 주입/사용법	✔️
observable 값 리액트에서 쓰기	✔️
Devtools 세팅과 활용법	✔️
외부 API 데이터 관리 패턴	✔️
computed 성능 최적화 및 주의점	✔️
배열/객체 observable 관리법	✔️