상태관리 라이브러리들의 종류
1. Redux
2. MobX
3. Context API
4. Recoil
등등
물론 안하고도 할 수 있지?(mapDispatchToProps...)
또한, 오직 순수함수에 의해서만 state를 변경해야 한다.
reducer에서 새로운 상태값을 return할 때 랜덤을 쓴다든지, Date 객체를 쓴다든지, 비동기 작업 등의 순수함수가 아닌 로직을 작성하면 안된다.
미들웨어를 이용해서 비동기 작업을 실행하고 그 다음에 action dispatching을 해주어 reducer가 state를 변경할 수 있도록 해주어야한다.
대표적인 미들웨어로서 redux-logger, redux-thunk, redux-saga가 있다.
페이스북에서 고안한 디자인 패턴인 flux로 부터 컨셉이 시작되었다.
State
Observable State로 관찰 받고 있는 데이터이다. Mobx에서는 해당 State가 관찰하고 있다가 변화가 일어나면 Reactions과 Derivations를 발생시킨다.
Derivations(Computed values)
기존의 상태가 변화에 따라 계산된(파생된) 값을 의미한다.
Reactions
Observable State의 변화에 따른 부가적인 변화를 의미하고 값이 바뀜에 따라 해야할 일을 정하는 것이다. Derivation과는 달리 값을 생성하지는 않고, 대체로 I/O와 관련된 작업을 하고, DOM업데이트와 네트워크 요청 등에 관여한다.
Action
상태를 변경시키는 모든 것을 의미한다. Mobx에서는 모든 사용자의 액션으로 발생하는 상태 변화들이 전부 Derivations와 Reactions로 처리되도록 한다.
특징
store를 여러 개 가지고 있다.
데코레이터로 간략하게 코드 작성가능
객체지향적
상대적으로 쉬운 설계
redux와는 달리 observer를 통해 변경사항을 자동으로 추적한다.
단일 store 이기 때문에 state 객체의 depth가 깊어질수록 번거롭고 관리하기 어려워진다.(=>immutable.js 라이브러리 등을 사용할 수 있지만 그래도 번거로움)
장점
설계가 쉽고 간단하다.
예제)
import {observable} from 'mobx';
class CounterStore {
@observable counter = 0;
increment() { this.counter++; }
decrement() { this.counter--; }
}
export default new CounterStore();
import React from 'react';
import {observer} from 'mobx-react';
import store from './store.js';
const Counter = () => (
<div>
<button onClick={() => store.increment()}>+1</button>
<span>{store.counter}</span>
<button onClick={() => store.decrement()}>-1</button>
</div>
);
export default observer(Counter);
redux에서 처럼 컴포넌트와 state를 연결하는 일련의 작업(mapDispatchToProps, mapStateToProps / react-redux의 hook을 이용한 작업 등)을 해주지 않고 이렇게 간단하게 구현할 수 있다.
redux에서 처럼 State의 불변성 유지를 위해 노력하지 않아도 된다.
상태 저장소인 context, 전역 상태를 제공하는 Provider, 전역 상태를 받아 사용하는 Consumer로 구성되어 있다.
사실 redux가 context api를 가지고 만든 라이브러리이다.
장점
추가 dependency 없이 전역 상태를 관리할 수 있다.
단점
상태가 여러 개이면 Provider를 중첩해서 내려줘야 한다.
state와 dispatch가 변할 때 마다, Provider를 구독하고 있는 모든 컴포넌트들이 리렌더링된다.
대부분의 대규모 서비스에서는 redux 혹은 mobx 전역 상태 라이브러리를 사용한다.
[참고 및 출처]
https://velog.io/@mementomori/React-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC-Tool-%EC%82%AC%EC%9A%A9-%EB%B9%84%EA%B5%90-Redux-VS-MobX-VS-Context-API
https://velopert.com/3528
https://egg-programmer.tistory.com/281
https://velog.io/@cada/React-Redux-vs-Context-API#context
https://lannex.github.io/blog/2020/redux-mobx/
https://boxfoxs.tistory.com/383
https://ykss.netlify.app/react/redux_mobx_recoil/