Mobx란?
Mobx는 프론트엔드를 위한 애플리케이션 상태 관리 라이브러리이다. 애플리케이션 전반에서 사용하는 상태(state, 자주 변경되어 관리되는 데이터)를 손쉽게 관리하여 변경에 대한 반응을 처리해줄 수 있는 라이브러리이다. 그래서 전역 상태 라이브러리 라고 표현하기도 한다.
상태 관리는 왜 필요할까? mobx를 왜 사용해야 할까?
간단하게 두 가지를 볼 수 있다.
- 1)유지보수가 쉬워지도록 상태 로직을 분리하여 모듈화 할 수 있다.
- 2)상태관리의 단계를 간결하게 해준다.
Note: Mobx는 간단하고(Simple) 확장 가능한(Scalable) 상태 관리 라이브러리를 철학으로 하고 있다.
Mobx의 특징
Mobx는 다음과 같은 특징을 가지고 있다.
- 1)React에 종속적인 라이브러리가 아님
- 2)아키텍처나 상태 컨테이너가 아닌 라이브러리
- 3)redux와 다르게 store에 제한이 없음
- 4)또한 redux에서 해줘야했던 action 선언, connect, mapStateToProps, mapDispatchToProps등 번거로운 작업들은 데코레이터로 간단하게 대체
- 5)observable을 기본적으로 사용하고 있음
- 6)Mobx는 절대적으로 필요한 경우에만 state 변경
- 7)Typescript를 기반으로 만들어짐
Mobx의 주요 요소
State(Observable State): 관찰 받고 있는 상태
- 모델을 채우는 객체, 비객체, 원시, 참조의 그래프
- 특정 부분이 바뀌면, Mobx에서는 정확히 어떤 부분이 바뀌었는지 알 수 있음
- 이 state의 변화는 reaction과 computations를 일으킴
- mobx6의
observable에 해당한다.
Derivation(Computed values) - 파생 값(연산된 값)
- Observable State의 변화에 따라 연산되어 나오는 값
- 특정값을 연산할 때에만 처리됨
- observable로부터 도출할 수 있으며, 값이 변경되면 자동으로 업데이트
- 성능최적화를 위해 사용한다.
- 메모리에 연산된 값을 캐슁하여, 만약 state가 변경되지 않을 경우 다시 연산하지 않고 캐슁되어 있는 값을 그대로 사용한다.
- mobx6의
computed에 해당한다.
Reactions - 반응
- Observable State의 변화에 따른 부가적인 변화
- 값이 바뀜에 따라 해야 할 일을 정하는 것을 의미
- 파생 값과 비슷하지만 값을 생성하지 않는 함수
- 대체로 I/O 와 관련된 작업
- 적당할 때 자동으로 DOM이 업데이트 되거나 네트워크 요청을 하도록 만듬
when,autorun,reaction- 리액트 컴포넌트에
observer함수로 감싸면 mobx에 내부적으로 컴포넌트 렌더링 메소드를 autorun으로 감싸서 상태 변화에 재렌더링을 하게 한다.
Actions : 액션, 상태를 변화시키는 것
- Observable State가 사용자가 지정한 것을 포함한 모든 변경사항
- 상태를 변경시키는 모든 것
- MobX는 모든 사용자의 액션으로 발생하는 상태 변화들이 전부 자동으로
파생값(Derivation)과리액션(Reactions)으로 처리되도록 한다. - mobx6의
action에 해당한다.
Note: 실제로 상태를 변경하는 함수에 action을 변경하지 않아도 자동적으로 reaction이 일어난다. 그렇다면 왜 action이 존재할까? 바로 action이 상태 변경을 트랜잭션 처리하기 때문이다. 예를 들어,
foo()라는 함수에서 observable 변수 a = 1, b = 2 로 변경하였다. 만약 action으로 지정된 함수라면 이를 하나의 변경으로 처리하여 한 번에 반영시키고, action이 지정되지 않은 함수라면 각각 하나씩 변경을 감지하여 두 번을 렌더링시키게 된다. 이는 성능적인 측면에서 action을 붙여주는게 좋다.
mobx의 플로우
출처: https://hyunseob.github.io/2017/10/07/hello-mobx/
위의 이미지는 mobx api 의 생명 주기를 요약해서 나타내고 있다. Action으로 인한 상태(State) 변경은 곧, 계산 결과(computed)를 업데이트한다. 계산 결과가 업데이트되면 곧 이를 구독하는 반응(Reaction)을 야기한다.
Note: mobx 는 버전 별로 사용 방식이 달라지고 있으니, 각 버전별 사용 방법에 대해선 잘 정리되어 있는 포스팅을 참고바란다.
mobx4 기준 개념 설명 및 리액트 적용 예시
아래 두 포스팅 글이 mobx4 기준으로 개념 설명 및 리액트 적용 예시를 이해하기 쉽게 설명하고 있으니 참고하면 된다.
- https://hyunseob.github.io/2017/10/07/hello-mobx/
- https://hyunseob.github.io/2017/10/18/mobx-with-react/
mobx6 기준 개념 설명 및 리액트 적용 예시
아래 포스팅 글을 통해 mobx6의 사용 방법을 참고하자.
mobx 공식 홈페이지
더 자세한 내용은 mobx 공식 홈페이지를 참고하자.
출처
- https://hyunseob.github.io/2017/10/07/hello-mobx/
- https://hyunseob.github.io/2017/10/18/mobx-with-react/
- https://github.com/mobxjs/mobx
- https://mobx.js.org/best/store.html
- https://kyounghwan01.github.io/blog/React/mobx/basic/#%E1%84%89%E1%85%A1%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%92%E1%85%A1%E1%84%82%E1%85%B3%E1%86%AB-%E1%84%8B%E1%85%B5%E1%84%8B%E1%85%B2