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를 변화 시키는 코드를 호출하면 액션