[MobX] MobX란?

MobX란?

MobX는 react에서 상태 관리를 위해 사용되는 Redux와 비슷한 종류의 State 관리 라이브러리이다. 하지만 Redux와는 다르게 너무나도 간결하고 깔끔한 구조를 가지고 있다.

mobX의 공식문서를 참고해보면 mobX는 다음과 같은 구조로 되어있다.

Actions : Observable State에 저장되어 있는 데이터들을 변화시키는 액션 함수.
Observable State : 관찰되고 있는 데이터 값들이 저장되어 있는 장소.
Compute Values : Observable State에 저장되어 있는 데이터가 변화되는 것을 알아채면 렌더링과 같은 Side-Effects Trigger를 전달한다.
Side-Effects : 렌더링과 같은 Side-Effects가 실행되고 실행된 Side-Effects들은 다시 액션 함수가 실행되도록 이벤트를 전달한다.

정리해보면, 관찰되고 있던 State 값들에 변화가 발생되면 렌더링 같은 side effects들이 실행되어 그에 따른 결과들이 화면에 보이게 되는 것이다.

하지만 만약 액션 함수가 실행되어도 state값들에 변화를 주지 않는다면 더 이상 아무것도 진행되지 않는다.

MobX는 함수형 프로그래밍을 투명하게 적용함으로 상태 관리를 쉽고 확장성 있게 만들어주는 검증된 라이브러리이다.

쉽다
- 미니멀하고 보일러 플레이트로부터 자유롭다
- 데이터를 변경하고 싶을 때 자바스크립트 할당문을 사용하면 된다
- 비동기 과정에서 데이터를 변경하고 싶을때 새로운 도구는 필요하지 않으며 MobX 시스템이 변경사항을 찾아내고 사용 중인 곳에 전달한다.
렌더링 최적화를 쉽게 할 수 있다
- 데이터의 모든 변경과 사용은 런타임에 추적되고 상태와 출력 사이의 모든 관계를 나타내는 의존 트리를 만든다
- 리액트 컴포넌트들처럼 상태에 따라 필요한 경우에만 연산이 실행된다
- memoization, selectors등을 사용하여 최적화 작업을 할 필요가 없다
구조가 자유롭다
- UI 프레임워크 밖에서 애플리케이션 상태를 관리 할 수 있다.
- 코드 분리가 쉽고 다른 곳에서 사용하기 유용하며 쉽게 테스트 할 수 있다

when : observes가 true를 반환할 때까지 실행하고 폐기
autorun : reactions이나 computed의 observer 대신에 사용가능.autorun으로 전달해주는 함수에서 사용되는 값이라면 해당 값을 주시하여 변경될떄 마다 주시하도록 해줌.
reaction : 특정 값이 바뀔 때 어떤 작업을 하고싶을 때 사용

상태에 변화를 일으키는 것. 모든 액션이 끝난 다음에 reaction이 나타남
transaction : 액션을 한꺼번에 일으키는 것
untracked : establishing observers없이 코드 실행이 가능 (reactionrhk 과 같지만 computed와는 다름)
allowStateChanges : allow/disallow 상태를 변화시킴

observer : mobx-react 패키지 내부에 존재. 관찰가능하게 만들어줌.

@autobind

@observable

@observer

@computed

@action

@asyncAction

@inject

Redux에서 쓰던 Provider와 똑같이 사용
Redux에서 Provider로 넘긴 props를 사용하기 위해서는 컴포넌트를 컨테이너로 감싼 뒤 mapSateToProps, mapDispatchToProps를 작성하여 사용 가능하게 만들어야 했음하지만 MobX에서는 @inject 선언으로 심플하게 사용 가능
MobX Store와 React Component 연결

출처 : 아래의 사이트들을 보면서 큰 공부 하였습니다