Frontend

MobX 라이브러리에 대해

단점이없어지고싶은개발자 2023. 9. 3. 01:59
반응형
반응형

 

핵심요약

 

  1. 쉽다.
    • 모든 변경사항을 감지하고, 사용중인 위치로 전파한다.
  2. 렌더링 최적화를 쉽게 할 수 있다.
    • 데이터에 대한 모든 변경 사항과 사용은 런타임에 추적되어 상태와 출력 간의 모든 관계를 캡처하는 종속성 트리를 구축한다. React 구성 요소와 같이 상태에 따른 계산이 엄격하게 필요할 때만 실행된다. 즉 자동으로 최적화 된다.
  3. 구조가 자유롭다.
    • UI 프레임워크 외부에서 애플리케이션 상태를 관리할 수 있다. 이렇게 되면 코드가 분리되고, 테스트 하기 쉽다.

 

mobx

 


핵심 개념

  • Observable State - 상태 : 관찰하려는 상태(state)를 뜻한다. state의 변화는 reactions와 computations를 일으킨다.
  • Derivations (computed Value) - 파생 값 : Observable state의 변화에 따라 파생된 연산 값이다. 필요한 경우에만 업데이트 된다.
  • Reactions - 반응 : Observable state의 변화에 따른 부가적인 변화다. 값이 바뀜에 따라 해야 할 일을 정하는 함수다.
  • Actions - 액션 : Observable state가 사용자가 지정한 것을 포함한 모든 변경사항을 말한다. MobX는 사용자의 액션으로 발생하는 상태 변화들이 모두 자동으로 파생 값(Derviations)과 반응(Reactions)으로 처리되도록 한다.


장점

  • MobX의 경우 리덕스와 달리 store가 여러 개가 될 수 있는데, 이는 분리가 용이해 편리할 수도 있는 반면 상태 변경시 다수의 스토어가 영향을 받을 수 있다.
  • 스토어의 데이터를 액션의 발행없이 업데이트할 수 있는데, 이는 구현이 쉽고 용이하지만 테스트나 유지보수 측면에서 문제를 일으킬 수 있다.
  • 리덕스보다 러닝커브가 낮고 보일러플레이트 코드의 양 또한 적기 때문에 프로젝트의 규모가 크지 않다면 적절하게 사용 가능하다.
반응형