MobX 상태관리

그냥차차·2023년 5월 2일
0

1. MobX란

  • MobX는 리액트 컴포넌트에서 상태가 변화할 때 자동으로 뷰를 업데이트하는 반응형 프로그래밍 모델을 사용합니다. 그리고 MobX는 코드가 간단하고 직관적이며 작성하기 쉽습니다. 이러한 이점 때문에 적은 코드로 빠르게 개발할 수 있습니다. 또한, MobX는 상태 업데이트 로직을 수행하는 동안 불필요한 렌더링을 최소화합니다.

2. Mobx의 장 단점

ㄱ. 장점

  • 적은 코드로 빠르게 개발 가능
  • 코드가 간단하고 직관적이며 작성하기 쉬움
  • 상태 업데이트 로직 수행 중 불필요한 렌더링을 최소화함

ㄴ. 단점

  • 모델링이 복잡해질수록 유지보수가 어려워짐
  • 반응형 프로그래밍 모델이 비동기적인 작업에서 사용하기 어려움

3. MobX의 주요 메소드

  • observable: 상태를 감시하는 데코레이터로, class 내부의 변수나 객체를 observable로 만들어 상태를 관리할 수 있습니다.
  • computed: 연산된 값을 반환하는 데코레이터로, observable 값을 이용하여 계산한 값을 반환할 수 있습니다.
  • action: 상태 값을 변경하는 데코레이터로, 함수를 감싸고 있으면 해당 함수가 호출될 때만 상태를 변경할 수 있습니다.
  • reaction: 특정한 observable 값이 변경될 때마다 실행되는 데코레이터로, autorun과 유사하지만, 특정한 observable 값이 변경될 때만 실행됩니다.
  • autorun: 함수를 자동으로 실행하는 데코레이터로, 함수 내에서 observable 값을 사용할 때마다 자동으로 함수를 실행합니다.

4.주요개념들

ㄱ) Observable State

  • 관찰 받고 있는 상태라는 뜻인데, 개발을 하다보면 상태는 항상 변할 수 있기 때문에 이 상태가 바뀐다면 MobX에서는 이를 캐치해낼 수 있습니다. 원시값들(string, number, boolean등등), 객체, 배열안에 객체 던 어떤 값들이 바뀌던지 MobX는 상태의 변화를 캐치할 수 있습니다.

ㄴ) Computed Value

  • 연산된 값이라는 뜻인데, 주로 성능 최적화를 위해서 많이 사용하긴 합니다. 연산에 기반 되는 값(상태값)이 변화할때만 새로 연산하고 바뀌지 않는다면 그냥 기존 값을 사용할 수 있도록 해줍니다.

ㄷ) Reactions

  • 값이 바뀔때에 따라 해야 할 일을 정의하는 것 , 예를들어 1)의 Observable State가 바뀌었을때 이 리액션을 통해 어떤 로직을 실행시키는 것이죠.

ㄹ) Actions

  • 상태에 변화를 일으키는 것, 1)의 Observable State를 변화 시키는 코드를 호출하면 액션
profile
개발작

0개의 댓글