리액트 상태관리 Mobx

1. Mobx란?

• redux와 마찬가지로 React에 사용되는 상태관리 라이브러리중 하나이다.
• component와 state 연결하는 Redux와 달리 복잡한 보일러플레이트 코드들을 데코레이터 제공으로 해결.

  보일러플레이트 코드란?
  : 최소한의 변경으로 여러곳에서 재사용되고 반복적으로 비슷한 형태를 띄는 코드

• Observable : Mobx에서 Rerendering 대상이 되는 state를 관찰대상이라 칭하며 @observable 데코레이터로 지정한 state는 관찰 대상으로 지정돠고 해당 state는 값 변경시마다 rerendering 된다.
• TypeScript 기반으로 만들어짐
• 꼭 필요한 경우에만 state 변경

2. Mobx의 장점

1. 객체지향적
2. Decorator
   • java 어노테이션과 유사
   • 보다 더 깔끔한 코드 작성 가능,,
   • redux에서 했던 action 선언, connect, mapStateToProps등 번거로운 작업들 데코레이터로 대체 가능
3. 캡슐화
   • Mobx configuration 설정으로 state를 오직 메소드를 통해 변경할 수 있도록 private하게 관리 가능
4. 불변성 유지를 위한 노력 불필요
   • 불변성 유지 위한 라이브러리 필요 없음

[Mobx flow]

• state(observerable) : 관찰 받고 있는 상태

  • state의 변화로 reaction과 computations 일으킴
  • 특정 부분 변경시 Mobx에서 어떤 부분 변경되었는지 확인 가능

• Derivation(Computed values) : 파생값(연산된 값)

  • state 변경에 따른 값, 값 변경시 자동으로 업데이트
  • state와 캐시로부터 새로운 결과 반환

• Reactions : 반응

  • 값이 바뀜에 따라 해야할 일을 정하는 것
  • 자동으로 DOM 업뎃 되거나 네트워크 요청을 하도록 만듬
  • when : observes가 true 반환할때까지 실행후 폐기
  • autorun : autorun으로 전달해주는 함수에서 사용되는 값이 있으면 자동으로 값을 주시하여 바뀔때마다 함수 주시되도록 해줌 (로깅/네트워크 요청에 유용)
  • reaction : 특정 값이 바뀔 때 어떤 작업을 하고싶을 경우 사용

• Actions : 액션

  • 상태를 변경시키는 모든 것
  • 모든 액션 끝난 후 reaction 나타남
  • Mobx는 모든 사용자의 액션으로 발생하는 상태 변화들이 자동으로 파생값과 리액션으로 처리되도록 함
    • transaction : 액션 한꺼번에 일으키는 것

• decorator 문법 사용 (참고)
  
  
  
  
  
  

참고
-우아한형제들 기술 블로그

-React Native Tutorial

-Mobx6 사용하기

-Mobx-react 개념 및 사용법