오늘은 상태관리 라이브러리 중 하나인 Mobx에 대해서 알아보겠습니다.

MobX의 기본 개념에 대해서 살펴보고 리액트 프로젝트에서 어떻게 사용되는지를 알아보겠습니다.

MobX 기본 개념

1. Observable

➡️ MobX에서 state(상태, 값)를 관찰 대상(observable value)라고 합니다.

이 객체에 변화가 일어나면 바로 탐지해낼 수 있습니다.

2. Computed Value

➡️ Computed Value(연산된 값)은 기존의 상태값과 다릉 연산된 값에 기반하여 만들어질 수 있는 값입니다.

연산에 기반되는 값이 바꿜때만 새로 연산을 하게 합니다.

3. Reaction

➡️ Reactions는 특정 값이 바뀜에 따라 해야할 일을 정하는 것입니다.

[포맷]

reaction(() => value, (value, previousValue, reaction) => { sideEffect }, options?)

[예시]

4. Actions

➡️ 액션은 상태에 변화를 일으키는 것을 의미합니다. Obserable State에 변화를 일으키는 코드를 호출한다면 액션이라고 할 수 있습니다.

💡useObserver를 사용해서 리턴하는 값의 업데이트를 계속 반영합니다.

마무리

MobX는 확실히 Redux에 비해 간편하고 사용하기 쉬워 보입니다.

실제 프로젝트에서 쓰면서 공부를 해나가야 할 것 같습니다. 🧐